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

【问题标题】：webpack: How do you bundle all scss files into a single main.css filewebpack：如何将所有 scss 文件捆绑到一个 main.css 文件中
【发布时间】：2016-12-08 04:55:34
【问题描述】：

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

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

【问题讨论】：

标签： javascript css reactjs webpack

【解决方案1】：

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

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

在 webpack 配置中：

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

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

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

【讨论】：

【解决方案2】：

您可以使用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 与 post-loader 和 css-loader 结合使用。我使用 post loader，所以我可以使用 autoprefixer。我有一个项目为基于 Esri 的应用程序做类似的事情，除了我使用自定义插件将 css 内联到头部并在折叠内容下方添加样式标签。你可以在这里找到它https://github.com/Robert-W/esri-redux。

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

【讨论】：