webpack - 如何配置webpack生成多个CSS主题文件？

Question

我有多个主题文件，它们基本上是SASS文件，具有不同的变量，这些变量指定特定于每个主题的颜色，字体等。项目中的其余SASS文件在其CSS规则中使用这些变量。

我想以这样的方式配置webpack，它将为每个主题文件生成1个CSS文件。

例如:

main.scss:

body {
  background-color: $theme-specific-color;
}

theme1.scss:

$theme-specific-color: blue;

theme2.scss:

$theme-specific-color: green;

所需的配置将输出2个CSS文件:

theme1.css:

body {
  background-color: blue;
}

theme2.css:

body {
  background-color: green;
}

我目前正在使用ExtractTextPlugin将样式表提取到CSS中。

Answer 1

我终于找到了解决方案。我所做的是用一个变量($theme)生成css，每个生成的css文件具有不同的值。在我的代码中，我的风格取决于$theme的值。

正在使用(是的，这些是旧版本。很抱歉):

"webpack": "2.2.0",
"webpack-combine-loaders": "2.0.3",
"multi-loader": "git://github.com/sshmyg/multi-loader.git#cbaa35f8936a939968adb78301be0204e36f30cd",
"extract-text-webpack-plugin": "git://github.com/ONE-LOGIC/extract-text-webpack-plugin.git#831af7b65ce749069993e60bd9cb51c637d4e98b",

然后我的webpack配置包含以下内容:

const extractDark = new ExtractTextPlugin({ filename: `css/style.dark.css`, allChunks: true });
const extractLight = new ExtractTextPlugin({ filename: `css/style.light.css`, allChunks: true });
...
config.module: {
  rules: [
    {
    test: /\.css$/,
    use: extractDark.extract({
      fallback: 'style-loader',
      use: [
        { loader: 'css-loader', query: { sourceMap: true } },
        { loader: 'postcss-loader' },
      ],
    }),
  }, {
    test: /\.css$/,

    use: extractLight.extract({
      fallbackLoader: 'style-loader',
      use: [
        { loader: 'css-loader', query: { sourceMap: true } },
        { loader: 'postcss-loader' },
      ],
    }),
  },
  {
    test: /\.scss$/,
    use: multi(
      combineLoaders(extractDark.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
          }, {
            loader: 'resolve-url-loader',
          }, {
            loader: 'sass-loader',
            options: {
              includePaths: [],
              sourceMap: true,
              data: '$theme: dark;',
            },
          },
        ],
      })),
      combineLoaders(extractLight.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
          }, {
            loader: 'resolve-url-loader',
          }, {
            loader: 'sass-loader',
            options: {
              includePaths: [],
              sourceMap: true,
              data: '$theme: light;',
            },
          },
        ],
      }))
    ),
  }
  ]
};
....
config.plugins.push(extractDark, extractLight);

最后，我的样式表具有如下代码:

$backgroundcolor: white;

@if $theme == dark {
  $backgroundcolor: black;
}

.myClass {
  background-color: $backgroundcolor;
}