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

本文介绍了如何配置 webpack 生成多个 CSS 主题文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I have multiple theme files, which are basically SASS files with different variables that specify colors, fonts etc. specific to each theme. The rest of the SASS files in the project use these variables in their CSS rules.

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

I would like to configure webpack in such a way that it will generate 1 CSS file for each theme file.

例如:

ma​​in.scss:

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

theme1.scss:

$theme-specific-color: blue;

theme2.scss:

$theme-specific-color: green;

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

The desired configuration would output 2 CSS files:

theme1.css:

body { background-color: blue; }

theme2.css:

body { background-color: green; }

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

I'm currently using ExtractTextPlugin to extract the stylesheets into CSS.

推荐答案

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

I finally found a solution. What I did is generate the css with a variable ($theme)having different values for each generated css file. And in my code, my style depends on the value of $theme.

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

It is working with (yes, these are old version. Sorry):

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

然后我的 webpack 配置包含这个:

then my webpack config contains this:

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);

最后，我的样式表有这样的代码:

Finally, my stylesheets have code like this:

$backgroundcolor: white; @if $theme == dark { $backgroundcolor: black; } .myClass { background-color: $backgroundcolor; }