导入多个.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网站上，即使我可能有几十个包含的组件，我的头部也只能看到一个样式标签import ./style.scss。

我现在正在开发一个非盖茨比，React和Webpack网站，当我的组件包含import ./style.scss大量时间时，使用相同的方法，但是看起来每个导入的样式文件都有一个样式标签。

我想知道盖茨比（Gatsby）的作用，以及如何在非盖茨比（Natsby）网站中包含相同类型的功能

更新

所以看起来在安装MiniCssExtractPlugin之后，我能够将所有的scss文件分组为一个css文件，

然后从更改我的webpack.config

      ...
      module: {
        rules: [
          ...
          {
            test: /\.(scss|css)$/,
            use: [
              'style-loader', // creates style nodes from JS strings
              {
                loader: 'css-loader', // translates CSS into CommonJS
                options: {
                  importLoaders: 1
                }
              },
              'postcss-loader', // post process the compiled CSS
              'sass-loader' // compiles Sass to CSS, using Node Sass by default
            ]
          },
       ...

成为

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

      module: {
        rules: [
          ...
          {
            test: /\.(scss|css)$/,
            use: [
              MiniCssExtractPlugin.loader, // creates style nodes from JS strings
              {
                loader: 'css-loader', // translates CSS into CommonJS
                options: {
                  importLoaders: 1
                }
              },
              'postcss-loader', // post process the compiled CSS
              'sass-loader' // compiles Sass to CSS, using Node Sass by default
            ]
          },
          ...
          plugins: [
              ...
              new MiniCssExtractPlugin({
                  filename: "style.css",
                  chunkFilename: "[name].css"
              })
          ]
          ...

但是控制台中有很多警告，如下所示

有谁知道如何解决这些警告？

    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/components/comp1/style.scss:    
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/comp1/style.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/comp1/style.scss 1.85 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/components/comp2/style.scss:    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/comp2/style.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/comp2/style.scss 942 bytes {mini-css-extract-plugin} [built]    
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]