如何配置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

我终于找到了解决办法。我所做的是使用变量（）生成 css，$theme每个生成的 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;
}