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

Question

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

webpacksasswebpack-style-loader

9

我有多个主题文件，它们基本上是带有不同变量的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。

- Yoav Kadosh

我也遇到了同样的问题。你找到解决方法了吗？ - Stilltorik

1

@Stilltorik 我正在使用多个webpack编译器（一组webpack配置）来生成不同的CSS主题文件，但这绝不是理想的解决方案。 - Yoav Kadosh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stilltorik · Accepted Answer

我终于找到了一个解决方案。我的做法是通过一个变量（$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;
}