Question

我正在制作一个反应应用，所以我的文件结构有一个组件文件夹，每个组件都有文件夹。每个组件文件夹都包含ComponentName.js和ComponentName.scss文件。如何配置我的webpack，以便我可以在index.html的头部添加<link rel="stylesheet" href="main.css" />？

我的webpack配置中有ExtractTextPlugin，但我不确定是否应该使用它，因为我不需要任何css文件。我也在寻找一个scss loader，但是只能找到sass loader，所以我应该使用它吗？

Answer 1

您可以使用HTML Webpack Plugin进行此操作。这可以将index.html作为输入模板，并自动将脚本和链接标记注入其中。所以它可以将你的main.css和你的js包注入html页面。它适用于ExtractTextPlugin。

我有类似以下配置的内容：

我的装载机：

module: {
  loaders: [{
    test: /critical\.scss$/,
    loader: ExtractTextPlugin.extract(['css', 'postcss', 'sass'])
  }]
}

我的插件：

plugins: [
  new ExtractTextPlugin('css/critical.css'),
  new HtmlWebpackPlugin({
    template: 'src/index.html'
  })
]

使用这种方法，我需要在你的代码中使用scss文件，只需在你的应用程序组件中执行它，你就可以让你的scss文件导入其他scss文件。我正在使用sass-loader与后加载器和css-loader相结合。我使用后加载器，所以我可以使用autoprefixer。我有一个项目为基于Esri的应用程序执行类似的操作，除了我使用自定义插件将css内联到头部并为折叠内容下方添加样式标记。你可以在https://github.com/Robert-W/esri-redux找到它。

注意：我自己仍然在学习webpack，所以这可能不是最好的设置，但对我来说效果很好。

Answer 2

您可以使用负责编译所有css文件并将它们捆绑在index.css文件中的webpack-text-extract-pluggin。

另请注意，您还需要安装sass-loader才能编译scss。

在webpack配置中：

<link rel="stylesheet" type="text/css" href="/index.css">

在index.html中：

require("./styles/my-custom-file.scss");

在任何通过webpack的Javascript文件中：

{{1}}

webpack：如何将所有scss文件捆绑到一个main.css文件中

2 个答案: