Webpack:从相同来源生成多个 css 文件
Webpack: Generate multiple css files from the same sources
我正在尝试使用 webpack 2 从相同的 SCSS 源生成 2 个不同的 CSS 文件,以便在不重复代码的情况下获得备用样式表。我已经通过注释掉一张成功地分别生成了两张纸,但无法弄清楚如何同时生成它们。我的 webpack 配置(为了相关性而缩短)是:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const ExtractLightCss = new ExtractTextPlugin("app-light.css")
const ExtractDarkCss = new ExtractTextPlugin("app-dark.css")
module.exports = {
...
module: {
rules: [
{
test: /\.scss?$/,
use: ExtractLightCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: true;"}} ]})
},
{
test: /\.scss$/,
use: ExtractDarkCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: false;"}} ]})
},
...
]
},
plugins: [
ExtractLightCss,
ExtractDarkCss
]
};
如果我尝试在此配置上 运行 webpack,我会收到错误提示
ERROR in ./~/css-loader!./~/sass-loader?{"data":"$light: true;"}!./~/extract-text-webpack-plugin/loader.js?{"id":2,"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?{"data":"$light: false;"}!./styles/[filename].scss
这让它看起来像是在同时运行两套规则,而不是运行一套然后一套。
有什么办法吗?
我做了进一步的研究,但似乎没有直接的方法来做到这一点(我发现 https://survivejs.com/webpack/foreword/ 是一个很好的资源)。但是我确实找到了解决方法。我使用 'composing-configuration' 以防止重复的方式创建我的模块规则,然后导出两个配置,以便 webpack 同时构建它们。一个简化的例子是:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const merge = require('webpack-merge');
const deploymentSass = (light) => {
return {
module: {
rules: [
{
test: /\.scss?$/,
use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", {
loader: "sass-loader",
options: {
data: light ? "$light: true;" : "$light: false;",
}} ]}),
},
],
},
plugins: [
new ExtractTextPlugin(`app-${light ? 'light' : 'dark'}.css`),
],
};
};
const lightTheme = merge(qaConfig,
deploymentSass(true));
const darkTheme = merge(qaConfig,
deploymentSass(false));
module.exports = [
lightTheme,
darkTheme,
]
这不是一个完美的解决方案,因为它涉及 2 个构建,但它可以让我在不重复代码的情况下生成两个样式表
我正在尝试使用 webpack 2 从相同的 SCSS 源生成 2 个不同的 CSS 文件,以便在不重复代码的情况下获得备用样式表。我已经通过注释掉一张成功地分别生成了两张纸,但无法弄清楚如何同时生成它们。我的 webpack 配置(为了相关性而缩短)是:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const ExtractLightCss = new ExtractTextPlugin("app-light.css")
const ExtractDarkCss = new ExtractTextPlugin("app-dark.css")
module.exports = {
...
module: {
rules: [
{
test: /\.scss?$/,
use: ExtractLightCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: true;"}} ]})
},
{
test: /\.scss$/,
use: ExtractDarkCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: false;"}} ]})
},
...
]
},
plugins: [
ExtractLightCss,
ExtractDarkCss
]
};
如果我尝试在此配置上 运行 webpack,我会收到错误提示
ERROR in ./~/css-loader!./~/sass-loader?{"data":"$light: true;"}!./~/extract-text-webpack-plugin/loader.js?{"id":2,"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?{"data":"$light: false;"}!./styles/[filename].scss
这让它看起来像是在同时运行两套规则,而不是运行一套然后一套。
有什么办法吗?
我做了进一步的研究,但似乎没有直接的方法来做到这一点(我发现 https://survivejs.com/webpack/foreword/ 是一个很好的资源)。但是我确实找到了解决方法。我使用 'composing-configuration' 以防止重复的方式创建我的模块规则,然后导出两个配置,以便 webpack 同时构建它们。一个简化的例子是:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const merge = require('webpack-merge');
const deploymentSass = (light) => {
return {
module: {
rules: [
{
test: /\.scss?$/,
use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", {
loader: "sass-loader",
options: {
data: light ? "$light: true;" : "$light: false;",
}} ]}),
},
],
},
plugins: [
new ExtractTextPlugin(`app-${light ? 'light' : 'dark'}.css`),
],
};
};
const lightTheme = merge(qaConfig,
deploymentSass(true));
const darkTheme = merge(qaConfig,
deploymentSass(false));
module.exports = [
lightTheme,
darkTheme,
]
这不是一个完美的解决方案,因为它涉及 2 个构建,但它可以让我在不重复代码的情况下生成两个样式表