Javascript 当我导入多个.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'

在我最近开发的一个应用程序中，我只能在头部看到一个样式标记，尽管我可能有几十个组件包含

import./style.scss

我现在正在开发一个非盖茨比、React和Webpack网站，当我的组件包含

import./style.scss

时，我经常使用相同的方法，但看起来每个导入的样式文件都有一个样式标签

我想知道盖茨比是做什么的，我如何能在我的非盖茨比网站中包含同样的功能

这项工作是由盖茨比完成的，而不是由盖茨比完成的。当然，Gatsby是从自定义实现扩展而来的，但是您可以通过添加自定义webpack配置（）将相同的行为导入到另一个项目中

webpack捆绑了所有JavaScript、JSON和CSS（默认情况下不支持SCS，应该通过添加自定义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';

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


更新：

您所说的警告是由于错误的进口引起的。这并不重要，因为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'],
      },
    ],
  },
};

我希望不必将它们全部导入到一个css文件中，当然不是，但这有助于对全局样式进行排序并避免重复，这是不可能的。您的问题必须通过网页拆分处理。未注意到您已使用一些试用更新了您的问题@Sam我已经用解决方案更新了答案，以避免出现
ignoreOrder
问题。