React项目导入SCSS文件后样式未生效的原因是什么？

如果你使用的是脚手架创建的React项目，要支持SCSS文件解析，需要先安装sass依赖（旧版node-sass已废弃，请勿安装避免版本兼容问题）：

• npm安装命令：npm install sass --save-dev
• yarn安装命令：yarn add sass -D

• 文件名不符合CSS Modules规范 #

你当前使用import style from "./Footer.scss"的CSS Modules方式引入样式，要求SCSS文件命名必须为[名称].module.scss格式，你当前文件名是Footer.scss，没有.module后缀的情况下，项目默认不会开启CSS Modules解析，引入的style对象会是空值，自然无法挂载对应类名样式。
解决方案：将文件名修改为Footer.module.scss，对应修改引入路径即可。
你可以先打印console.log(style)验证：如果输出是空对象，即可确认是该问题。

• 自定义构建配置未开启CSS Modules #

如果你的项目是自行配置webpack，而非使用create-react-app等开箱即用的脚手架，需要检查webpack配置中是否开启了css-loader的modules选项，参考配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.(scss|sass)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true // 必须开启该配置才能解析CSS Modules
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
}

• 样式被更高优先级规则覆盖 #

打开浏览器开发者工具的「元素」面板，检查Footer对应的DOM节点：

1. 确认你写的SCSS类名是否正确挂载到了元素属性上
2. 查看对应类名的样式是否存在，是否被全局样式、行内样式等更高优先级的规则覆盖

• 布局问题导致元素不可见 #

你写的.page类配置了padding-top: 8810px、position: absolute属性，有可能Footer元素被定位到了可视视口之外，看起来像样式没生效，实际是元素没有显示在屏幕范围内。你可以在元素面板选中Footer的DOM，查看浏览器高亮的元素位置是否在可视区域内。

• 样式文件路径引入错误 #

检查Footer.scss文件的相对引入路径是否正确，层级写错的情况下会导致样式文件加载失败，控制台一般会输出对应警告，你可以查看控制台是否有相关提示。

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