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

我正在制作一个react应用程序，所以我的文件结构有一个组件文件夹，其中包含每个组件的文件夹。每个组件文件夹都包含一个

ComponentName.js

和

ComponentName.scss

文件。如何配置我的网页包，以便在index.html的头部添加一个

---

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

您可以使用它。这可以将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加载器，结合了post加载器和css加载器。我使用后加载器，所以我可以使用自动刷新器。我有一个项目为一个基于Esri的应用程序做类似的事情，除了我使用一个自定义插件将css内联到头部，并为下面的折叠内容添加一个样式标记。你可以在这里找到它

---

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

你可以使用webpack文本提取插件，它负责编译所有css文件并将它们捆绑到index.css文件中

还要注意，为了编译SCS，您还需要安装sass加载程序

在网页包配置中：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
config = {
    ..., 
    plugins: [
        ...,
        new ExtractTextPlugin('index.css')
    ],
    module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style','css')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!sass')
            }
        ]
    }
}

在index.html中：

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

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