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

在 loader 部分中，添加以下内容:

{
    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