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