如何配置 webpack 生成单独的 css 主题

Question

我正在开发一个反应应用程序，现在扩展了几个主题。

这些主题.scss在我的主题文件夹中的文件中定义：

- themes
- - theme-base.scss
- - theme.dark.scss
- - theme.light.scss

它们包含带有一些变量的基本配色方案，例如：

[theme-dark.scss]
$color-primary: #100534;
$color-primary-accent: #231454;

所有组件都只使用这些颜色变量来主题化它们。

现在我希望 webpack 编译并连接我的 scss 代码，以便为每个主题分隔静态 css 文件。

我通过使用 extractWebpackTextPlugin 和一些像这样的文件加载器来让它工作：

module.exports = env => {
  const config = require('./webpack.common')(env);
  const project = env.project;

  const postcss = {
    loader: 'postcss-loader',
    options: postcssConfig(settings.browsers),
  };

  config.watch = true;
  config.devtool = 'eval';

  const themes = ['theme-base'];

  themes.forEach(themeKey => {
    const themeInstance = new ExtractTextPlugin('css/' + themeKey + '.css');
    const themePath = path.resolve(__dirname, '../../react/app/css/_' + themeKey + '.scss');

    config.module.rules.push({
      test: /\.s?css$/,
      exclude: /node_modules/,
      use: themeInstance.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              localIdentName: '[hash:base64:5]',
              modules: true,
              importLoaders: 1,
            }
          },
          postcss,
          {
            loader: 'sass-loader',
            options: {
              data: `@import "${themePath}";`,
            }
          }
        ]
      }),
    });

    config.plugins.push(themeInstance);
  });
}

但是： 我不能在我的数组中添加一个以上的主题themes！一旦它包含多个项目，css 和 sass 加载器就会在读取 scss 文件时抛出错误。

Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

我将如何设置 webpack 为每个主题编译一个静态 css 文件？

Answer 1

我目前正在处理类似的问题，我尝试在不侵入代码的情况下解决它。然后我编写了一个 webpack 插件主题切换来做到这一点。它将根据主题目录提取主题。也许它可以帮助你。

示例配置：

new ThemesGeneratorPlugin({
      srcDir: 'src',
      themesDir: 'src/assets/themes',
      outputDir: 'static/css',
      defaultStyleName: 'default.less',
      themesLoader: {
        test: /\.(less|css)$/,
        loaders: [
          { loader: require.resolve('css-loader') },
          { loader: require.resolve('less-loader') }
        ]
      }
    })

现在我只是使用变量来定义不同的颜色和尺寸，然后webpack会为我生成主题，样式格式可以是less，postcss和sass。然后我可以在我的应用程序中进行实时切换。该插件会自动清除未使用的文件。