如何在 postcss.config.js 中为不同的 Webpack 入口点配置不同的 customProperties?
How can I configure different customProperties in postcss.config.js for different Webpack entry points?
我正在使用 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"
]
}
]
}
}
我也在用postcss-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
。
我想通了。这是我解决它的方法。
我将 webpack.config 文件切换为具有多个配置,每个入口点一个。我还配置了 postcss-loader 以将入口点作为上下文传递给 postcss.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))
我的 postcss.config.js 文件可以根据入口点有条件地配置。在此示例中,我定义了内联样式,但可以通过 require
.
从外部模块中提取这些样式
postcss.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'
}
}
}
}
}
})
您也可以在 postcss.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'
}
}
}
}
}
})
最后,解决方案是 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,
},
};
};
我正在使用 Webpack 4。
我的 webpack.config.js
中有两个入口点,我使用 mini-css-extract-plugin
.
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"
]
}
]
}
}
我也在用postcss-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
。
我想通了。这是我解决它的方法。
我将 webpack.config 文件切换为具有多个配置,每个入口点一个。我还配置了 postcss-loader 以将入口点作为上下文传递给 postcss.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))
我的 postcss.config.js 文件可以根据入口点有条件地配置。在此示例中,我定义了内联样式,但可以通过 require
.
postcss.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'
}
}
}
}
}
})
您也可以在 postcss.config.js:
中尝试 env.file.basenamemodule.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'
}
}
}
}
}
})
最后,解决方案是 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,
},
};
};