SCSS 不会在 Gatsby 上加载

Question

我尝试为我的 Gatsby 项目加载 SASS，但是如果我检查网络的源代码，我的 sass 中没有任何 class。我有点困惑，我遵循了 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 文件中现在有 class 名称。

最好的问候诺姆

Answer 1

I didn't integrate in any component. Because if I see the Source code of chrome then there should be scss be loaded.

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

就这样：

const IndexPage =()=>{

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

与任何其他 HTML 元素一样。

SCSS 不会在 Gatsby 上加载

SCSS doesn't load on Gatsby

sass

reactjs

server-side-rendering

gatsby

gatsby-plugin