Question

我目前正在开发一个使用不同前端主题的应用程序。这些主题只是CSS文件，可由用户选择。

从技术上讲，这些主题是.scss文件，它们由webpack编译并通过角度标准链接标记加载：

<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）或删除它们时，所有主题都被编译到主模块中，这就是cource - 打破了主题，因为所有主题都是一起应用的。

如何在不使用extractTextPlugin的情况下直接使用webpack生成这些CSS文件？我尝试了不同的enntries / chunk，文件加载器的各种尝试......但没有什么真正有效。

应该很简单：从SCSS文件生成静态CSS文件，而不使用ExtractTextPlugin将它们转换为JS文件。

如果有人能指出我正确的方向，那就太棒了。

Answer 1

一种方法可能是以尊重不同模式的方式组织Webpack配置：

开发：不要使用ExtractTextPlugin（稍后会查看包含所有内容的文件的问题）
制作：立即使用ExtractTextPlugin

您可以查看este中的完成方式。

关于没有ExtractTextPlugin（一个包含所有主题的文件）的问题：发生这种情况是因为您的配置同时包含theme-1.scss和theme-2.scss作为“app＆＃39; app”中的入口点。大块，所以Webpack把它们放在一起（一块）。您可以尝试另一种方式：将它们从入口点列表中排除，并在源代码中添加如下内容：

require('../assets/sass/themes/' + theme + '.scss');

在这种情况下，在开发模式中，根据变量＆＃34; theme＆＃34;的值，您只能加载一个模块（主题）。在生产模式下，Webpack将浏览资产/ sass / themes /＆＃39;中的所有文件。（当需要＆＃39;包含表达式时）特定的Webpack行为，包括它们作为模块，然后ExtractTextPlugin将处理它们的提取（所以你不必在这里做任何事情）。

关于如何在生产中加载特定主题有一些棘手的部分（因为＆＃34;要求＆＃34;你在代码中没有做任何事情，ExtractTextPlugin会将相应的模块留空）所以你有添加一些代码，将<link>添加到HTML的<head>。同时，在开发模式下不应调用此代码。一个可以帮助实现它的肮脏黑客：

if (!__DEV__) {
  // do adding <link> to the <head>
}

（另请参阅este示例，如何使用DefinePlugin定义__DEV__变量）。

我真的很好奇如何以更好的方式解决它......

使用webpack生成静态CSS文件

1 个答案: