相关疑难解决方法(0)

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

这些主题.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, …