SCSS 无法在 Gatsby 上加载答案

【问题标题】：SCSS doesn't load on GatsbySCSS 无法在 Gatsby 上加载
【发布时间】：2021-10-29 02:07:30
【问题描述】：

我尝试为我的 Gatsby 项目加载 SASS，但如果我检查网络的源代码，我的 sass 中没有任何类。我有点困惑，我遵循了 Gatsby 的文档。没有任何效果，所以我最后的机会就是这样。

// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'assets',
    path: `${__dirname}/static/`,
  },
 },
]

我在这里导入样式。

/**
 * Add browser relation logic.
 */
require('./style/global.js');
import './style/sass/index.scss';

我遵循了 gatsby-plugin-sass 文档，我应该已经准备好了。重新启动服务器并显示我的应用程序的源代码后，我的 sass 文件中现在有类名。

最好的问候克诺姆

【问题讨论】：

您能提供一个没有出现的className 的样本吗？
@FerranBuireu 例如.grid-container
能否提供组件？（编辑问题）
@FerranBuireu 我没有集成任何组件。因为如果我看到 chrome 的源代码，那么应该会加载 scss。

标签： reactjs sass gatsby server-side-rendering gatsby-plugin

【解决方案1】：

我没有集成任何组件。因为如果我看到源代码的 chrome 那么应该有 scss 被加载。

好的，好吧... SCSS 已按应有的方式加载，但样式并未应用于任何组件，因为您尚未设置任何类名。

只要做：

const IndexPage =()=>{

   return <div className="grid-container">I'm your index page</div>
}

与任何其他 HTML 元素一样。

【讨论】：