7

我目前正在开发一个使用不同前端主题的应用程序。这些主题只是用户可以选择的 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 文件？我尝试了不同的条目/块、文件加载器等各种尝试，但没有任何效果。

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

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

4

1 回答 1

2

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

  • 开发：不要使用 ExtractTextPlugin（请参阅稍后关于包含所有内容的文件的问题）
  • 生产：像现在一样使用 ExtractTextPlugin

你可以看看它是如何在este中完成的。

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

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

在这种情况下，在开发模式下，您将只加载一个模块（主题），具体取决于变量“主题”的值。在生产模式下，Webpack 将遍历 'assets/sass/themes/' 中的所有文件（'require' 包含表达式时的特定 Webpack 行为），包括它们作为模块，然后 ExtractTextPlugin 将处理它们的提取（所以你没有在这里做任何事情）。

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

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

（另请参见 este 示例中如何使用 DefinePlugin 来定义__DEV__变量）。

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

于 2015-10-30T00:23:39.283 回答