在Gatsby JS项目中使用react-md时CSS样式不生效的问题求助

嘿，我之前帮朋友排查过一模一样的问题，咱们一步步来搞定它：

1. 先确认依赖是否装全 #

react-md依赖Sass，而且Gatsby的gatsby-plugin-sass需要对应的Sass编译器。如果你只装了插件没装Sass本身，样式肯定出不来。赶紧跑一遍安装命令：

# npm
npm install react-md sass

# yarn
yarn add react-md sass

2. 检查Gatsby插件配置 #

确保gatsby-plugin-sass真的在gatsby-config.js的插件列表里，而且没有被注释掉：

module.exports = {
  plugins: [
    'gatsby-plugin-sass',
    // 其他插件放在后面就行
  ],
};

3. 修正样式导入路径 #

你写的@import '~react-md/src/scss/react-md';里的~可能在Gatsby的Sass配置里不生效。试试去掉~直接导入：

// src/layouts/index.scss
@import 'react-md/src/scss/react-md';

如果还是不行，去你的node_modules/react-md目录里看看，确认src/scss/react-md.scss（或者不带后缀的react-md）真的存在——有些新版本的react-md可能调整了路径，比如改成了react-md/scss/react-md。

4. 确保样式全局加载 #

有时候你的页面可能没正确使用Layout组件，导致样式没被引入。更稳妥的方法是在gatsby-browser.js里直接全局导入样式文件：

// gatsby-browser.js
import './src/layouts/index.scss';

这样不管哪个页面都会加载react-md的样式，不会漏。

5. 避开CSS模块化的坑 #

如果你的样式文件名是index.module.scss（带.module后缀），Gatsby会把它当成模块化CSS，样式只会作用在当前组件，不会全局生效。把文件名改成普通的index.scss就行。

6. 清除Gatsby缓存 #

Gatsby的缓存有时候会搞事情，导致样式不更新。跑以下命令清缓存再重启开发服务：

gatsby clean && gatsby develop

最后检查组件导入 #

确认你用的是react-md的官方组件，比如：

import { Button } from 'react-md';

而不是自己写的同名组件哦。

按上面的步骤走一遍，应该就能看到Button的样式啦！

内容的提问来源于stack exchange，提问作者runandrew