React中SCSS的@use导入失败如何解决？能否使用SCSS模块？

一、修复SCSS @use导入错误 #

你遇到的SassError: Can't find stylesheet to import是因为导入的目标文件路径/名称不匹配，按以下方案解决：

1. 修正导入语句 #

你的主变量文件是_Style.scss，但你写了@use 'base'——Sass会尝试查找base.scss或_base.scss，自然找不到。根据文件相对位置调整导入路径：

• 如果Section.scss和_Style.scss在同一目录：

  @use './Style'; // SCSS允许省略下划线和.scss后缀
  
  .firstSection {
      background-color: Style.$Dark-Violet;
  }
  

• 如果_Style.scss在其他目录，比如src/Style/base/，而Section.scss在src/Style/：

  @use './base/Style';
  

2. 全局配置SCSS路径（可选） #

如果项目中有大量SCSS文件，可通过sass-loader配置includePaths，让Sass能全局识别指定目录，不用每次写相对路径：
在webpack配置文件中添加：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['src/Style'], // 替换成你的SCSS根目录
              },
            },
          },
        ],
      },
    ],
  },
};

配置后直接写@use 'Style'即可导入。

二、React中支持SCSS模块样式 #

当然可以用，这是React组件化开发中避免样式冲突的常用方案，使用步骤：

1. 命名规则：将SCSS文件命名为[文件名].module.scss，比如Section.module.scss。
2. 组件中使用：

   import styles from './Section.module.scss';
   
   export default function FirstSection() {
     return <div className={styles.firstSection}>这是使用SCSS模块的区域</div>;
   }
   

   SCSS模块会自动生成唯一类名，彻底解决样式污染问题。

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