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

Question

我正在开发一个 React 应用程序，现在已扩展了多个主题。

这些主题在我的主题文件夹中的 .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 文件时就会抛出错误。

“...加载样式”后的 CSS 无效:预期有 1 个选择器或 at 规则，为“var content = requi”

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

Answer 1

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

示例配置:

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。然后我可以在我的应用程序中进行实时切换。该插件会自动清除未使用的文件。