当我导入多个.scss文件时，如何在html头中只包含一个css文件？

我的网站结构看起来有点像

src/
    components/
        Footer/
            index.jsx
            style.scss
        Header/
            index.jsx
            style.scss
        Navbar/
            index.jsx
            style.scss
...

在我的每个index.jsx文件中，我都有import './style.scss'。

在我最近开发的Gatsby website中，我只能看到头部有一个样式标签，尽管我可能有几十个组件包含import ./style.scss。

我现在正在开发一个非Gatsby，Reaction；webpack网站，当我的组件很多时候包含import ./style.scss时，使用相同的方法，但看起来每个导入的样式文件都有一个样式标记。

我想知道Gatsby是做什么的，以及如何在我的非Gatsby网站中包含相同的功能

---

解决方案

此工作由webpack完成，而不是由盖茨比完成。当然，Gatsby扩展自定义实现，但您可以通过添加自定义webpack配置(as you can do in Gatsby as well)将相同的行为导入到另一个项目中。

webpack使用code-splitting technique捆绑了所有的JSON、JSON和css(默认不支持scss，应该通过添加一个自定义的webpack的配置或通过插件来实现)文件。这允许您将代码分散到根据需要或请求加载的几个捆绑包中。

此外，可能对您有用的一件事是使用主文件来收集一些导入。给定：

src/
    components/
        Footer/
            index.jsx
            style.scss
        Header/
            index.jsx
            style.scss
        Navbar/
            index.jsx
            style.scss

您可以在/src/styles下创建名为styles.scss和：

的文件

@import 'components/Footer/style';
@import 'components/Header/style';
@import 'components/Navbar/style';

然后将该文件导入包含其他组件的顶级组件中。

---

更新：

您所说的警告是由于错误的输入order in styles。这并不重要，因为webpack破坏了所有这些风格，但它们创造了一个警告。有一个名为ignoreOrder的属性(默认设置为false)。您可以通过以下方式进行修复：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      ignoreOrder: true, // here
    }),
  ],
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};