如何使用 webpack 提取多个主题样式表？

Question

我正在尝试使 React 应用程序主题化。目前，主题仅由定义不同标题颜色等的不同 Sass 变量集组成。

根据我目前的理解，ExtractTextPlugin 似乎是我最好的选择，因为我不希望我的样式被内联，而是每个主题都有单独的文件。

所以我创建了两个主题：

src/scss/themes/theme-a.scss
src/scss/themes/theme-b.scss

主题导入基本布局和常用样式并覆盖相关变量。

但我设法让 webpack 创建单独的 css 文件的唯一方法 这两个主题都是为每个主题创建不同的切入点 我的webpack.prod.config：

entry: {
  app: './src/js/init.js',
  theme-a: './src/scss/themes/theme-a.scss',
  theme-b: './src/scss/themes/theme-b.scss'
},

但是为每个添加的新主题添加一个新的入口点感觉不对，我认为一定有更好的方法吗？

Answer 1

为避免手动添加主题，一种可能的解决方案是创建一个函数，该函数读取主题文件夹的内容并以编程方式为每个 *.scss 文件添加一个条目。

类似这样的事情：

function getThemes(themePath) {
    var themes = {};
    fs.readdirSync(themePath).forEach(function(fileName) {
        var fileNameWithPath = path.join(themePath, fileName);

        var stat = fs.lstatSync(fileNameWithPath);
        if (stat.isDirectory()) return;
        if (!/\.scss$/.test(fileName)) return;

        var nameWithoutExt = path.basename(fileName, '.scss');
        themes[nameWithoutExt] = fileNameWithPath;
    });

    return themes;
}

var themes = getThemes('./src/scss/themes');

var config= {
    entry: _.merge({ app: './src/js/init.js' }, themes),
    // rest of options
};

这将要求您在添加新主题文件时重新启动您的开发服务器或重新运行您的 webpack 构建，但至少您不必修改您的 webpack 配置。

Answer 2

这是您的解决方案：

npm i --save-dev file-loader

在loaders 部分，添加以下内容：

{
    test: /themes\/.+\.scss$/,
    loader: "file-loader?name=./compiled-themes/css/[name].css!css!sass"
},

可能有更多的 scss 文件，如果是这样，则必须有另一个部分照常捆绑它们，但跳过主题：

{
    test: /\.scss$/,
    exclude: /themes\/.+\.scss$/,
    loader: "css!sass"
},

文件加载器按文件名、哈希和扩展名写入文件，因此您可以保留名称。

注意name=./compiled-themes/css/[name].css 部分，其中[] 变量被替换。

https://github.com/webpack/file-loader