如何在postss.config.js中为不同的Webpack入口点配置不同的customProperties

Question

我正在使用Webpack 4。

我的webpack.config.js中有两个入口点，我将使用mini-css-extract-plugin为每个入口点生成一个单独的CSS文件。

const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development',
entry: {
foo: './foo.js',
bar: './bar.js'
},
output: {
path: path.resolve(__dirname, 'src/'),
filename: 'js/[name].js'
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css"
})
],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
"css-loader", "postcss-loader"
]
}
]
}
}

我也在使用postss-cssnext。

在根文件夹中的postcss.config.js文件中，我在customProperties中定义了许多CSS变量，如下所示：

module.exports = {
plugins: {
'postcss-cssnext': {
features: {
customProperties: {
variables: {
color1: '#333',
color2: '#53565A',
baseFont: 'Helvetica, sans-serif'
}
}
}
}
}
}

如果我想让我的CSS变量在两个入口点中的每一个都有不同的值，我该怎么做呢？

例如，假设在foo.css中，我希望var(--color1)等于#333，但在bar.css中我希望它等于#860000。

Answer 1

我想明白了。以下是我解决问题的方法。

我将webpack.config文件切换为具有多个配置，每个入口点一个。我还配置了postpass加载程序，将入口点作为上下文传递给postpass.config.js.

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const entryPoints = ['foo', 'bar']
const config = entry => ({
mode: 'development',
entry: `./${entry}.js`,
output: {
path: path.resolve(__dirname, 'src/'),
filename: `js/${entry}.js`
},
plugins: [
new MiniCssExtractPlugin({
filename: `css/${entry}.css`
})
],
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader', 
{
loader: 'postcss-loader',
options: {
config: {
ctx: { entry }
}
}
},
]
}
]
}
})
module.exports = entryPoints.map(entry => config(entry))

然后可以根据入口点有条件地配置postss.config.js文件。在本例中，我以内联方式定义样式，但这些样式可以通过require从外部模块引入。

postpass.config.js

module.exports = ({ options }) => ({
plugins: {
'postcss-cssnext': {
features: {
customProperties: {
variables: 
options.entry === 'foo' ? 
{
color1: '#333',
color2: '#53565A',
baseFont: 'Helvetica, sans-serif'
} :
{
color1: '#860000',
color2: '#555',
baseFont: 'Arial, sans-serif'
}
}
}
}
}
})

Answer 2

最后，解决方案是webpack层。。。

const Path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, options) => {
return {
entry : {
desktop : { import : './desktop.js', layer : 'desktop' },
mobile : { import : './mobile.js', layer : 'mobile' },
},
module : {
rules : [
{
test : /.js$/,
exclude : /node_modules/,
loader : 'babel-loader',
options : {
presets : ['@babel/preset-env'],
},
},
{
test : /.css$/,
oneOf : [
{
issuerLayer: 'desktop',
use : [
{ loader : 'some-loader', options : { } },
],
},
{
issuerLayer: 'mobile',
use : [
{ loader : 'another-loader', options : { } },
],
},
]
},
],
},
output : {
path : Path.resolve(__dirname, 'public'),
filename : '[name].js',
},
plugins : [
new MiniCssExtractPlugin({ filename : '[name].css' }),
],
experiments: {
layers : true,
},
};
};

参见回购示例：https://github.com/nolimitdev/webpack-layer-example

Answer 3

您也可以在postss.config.js:中尝试env.file.basename

module.exports = (env, args) => ({
plugins: {
'postcss-cssnext': {
features: {
customProperties: {
variables: 
env.file.basename === 'foo' ? 
{
color1: '#333',
color2: '#53565A',
baseFont: 'Helvetica, sans-serif'
} :
{
color1: '#860000',
color2: '#555',
baseFont: 'Arial, sans-serif'
}
}
}
}
}
})