javascript - 如何在 postcss.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"
                ]
            }
        ]
    }
}

我也在使用 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。

Answer 1

我想通了。这是我解决它的方法。

我将我的 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'
              }
        }
      }
    }
  }
})