我目前正在开发一个使用不同前端主题的应用程序。这些主题只是用户可以选择的 CSS 文件。
从技术上讲，这些主题是 .scss 文件，它们由 webpack 编译并通过 angular 中的标准链接标签加载:<link rel="stylesheet", ng-href="themes/{{theme}}.css">
我剥离的 webpack 配置如下所示:
theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),
module.exports = new WebpackConfig().merge({
entry: {
app: [
'./app/main.ts',
'./assets/sass/themes/theme-1.scss',
'./assets/sass/themes/theme-2.scss'
],
},
output: {
path: "build/",
filename: "[name].bundle.js",
publicPath: "/build/"
},
plugins: [
theme1CssExtractor,
theme2CssExtractor,
],
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader']
},
[
{
test: /theme-1\.scss$/,
include: path.resolve(__dirname, "assets/sass/themes"),
loader: theme1CssExtractor.extract(
"style",
"css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
)
},
{
test: /theme-2\.scss$/,
include: path.resolve(__dirname, "assets/sass/themes"),
loader: theme2CssExtractor.extract(
"style",
"css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
)
}
]
]
}
在我想使用启用热模块替换 (HMR) 功能的 webpack-dev-server 之前，这完全可以正常工作，因为 extractTextPlugin 不支持 HMR。当我简单地禁用 extractTextPlugin (options.disable) 或删除它们时，所有主题都会编译到主模块中，这 - 当然 - 会破坏主题，因为所有主题都被一起应用。
如何在不使用 extractTextPlugin 的情况下直接使用 webpack 生成这些 CSS 文件？我尝试了不同的条目/ block 、文件加载器等各种尝试，但没有任何效果。
它应该很简单:从 SCSS-Files 生成静态 CSS-Files，而不使用 ExtractTextPlugin 将它们转换为 JS-Files。
如果有人能指出我正确的方向，那就太好了。
最佳答案
一种方法可能是以尊重不同模式的方式组织您的 Webpack 配置:
你可以看看它是如何在 este 中完成的。
关于没有 ExtractTextPlugin(一个包含所有主题的文件)的问题:这是因为您的配置在“app” block 中包含
theme-1.scss 和 theme-2.scss 作为入口点，因此 Webpack 将它们放在一起(一个 block )。您可以尝试另一种方式:将它们从入口点列表中排除，并在源代码中添加如下内容:require('../assets/sass/themes/' + theme + '.scss');
在这种情况下，在开发模式下，您将只加载一个模块(主题)，具体取决于变量“主题”的值。在生产模式下，Webpack 将遍历 'assets/sass/themes/' 中的所有文件('require' 包含表达式时的特定 Webpack 行为)，包括它们作为模块，然后 ExtractTextPlugin 将处理它们的提取(所以你没有在这里做任何事情)。
关于如何在生产中加载特定主题有一些棘手的部分(因为您在代码中拥有的“require”不会做任何事情，ExtractTextPlugin 会将相应的模块留空)，因此您必须放置一些添加
<link> 的代码HTML 的 <head>。同时，不应在开发模式下调用此代码。一个可以帮助实现它的肮脏黑客:if (!__DEV__) {
// do adding <link> to the <head>
}
(另请参见 este 示例中如何使用 DefinePlugin 定义
__DEV__ 变量)。我真的很好奇如何以更好的方式解决它......
关于webpack - 使用 webpack 生成静态 CSS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33392983/