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

Question

我的网站结构有点像

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、React 和 Webpack 的网站，当我的组件经常包含 import ./style.scss 时使用相同的方法，但看起来每个导入的都有一个样式标签样式文件。

我想知道 Gatsby 的功能，以及如何在我的非 Gatsby 网站中包含相同类型的功能

Answer 1

这项工作由 webpack, not by Gatsby. Of course, Gatsby extends from a custom implementation but you can import the same behavior into another project by adding a custom webpack configuration (as you can do in Gatsby as well) 完成。

webpack bundles all JavaScript, JSON, and CSS（默认不支持SCSS，需要通过添加自定义webpack的配置或者通过插件）文件使用 code-splitting technique。这允许您将代码分成几个包，根据需要或请求加载。

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

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'],
      },
    ],
  },
};

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

How do i include only one CSS file in the html head when I import multiple .scss files?

javascript

sass

head

webpack

gatsby