如何使用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

这是你的解决方案:

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