當我導入多個.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 網站中，我只能在頭部看到一個樣式標簽，盡管我可能有幾十個包含import./style.scss的組件。

我現在正在開發一個非 Gatsby、React 和 Webpack 網站，當我的組件經常包含import./style.scss時使用相同的方法，但看起來每個導入的樣式文件都有一個樣式標簽。

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

Answer 1

這項工作是由webpack完成的，而不是由 Gatsby 完成的。 當然，Gatsby 擴展自自定義實現，但您可以通過添加自定義 webpack 配置將相同的行為導入另一個項目（就像在 Gatsby 中一樣）。

webpack bundles all JavaScript, JSON, and CSS (by default does not support SCSS, it should be achieved by adding a custom webpack's configuration or via plugins) file using a 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';

然后將文件導入包含其他組件的頂級組件中。

---

更新：

您正在談論的警告是由於styles 中的錯誤導入順序造成的。 由於 webpack 將所有這些 styles 分塊，因此並不重要，但它們會產生警告。 有一個名為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'],
      },
    ],
  },
};