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

小编典典

reactjs

我正在尝试使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'
},

但是，为每个添加的新主题添加新的切入点感觉是错误的，我认为必须有更好的方法吗？

阅读 418

2020-07-22

共1个答案

小编典典

这是您的解决方案：

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"
},

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

注意替换var 的name=./compiled-themes/css/[name].css部分[]。

2020-07-22