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

Question

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

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

例如：

ma​​in.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;
}