在React中使用Sass/SCSS是否值得？Create-React-App配置疑问

嘿，我之前也遇到过一模一样的问题！不用急着放弃CSS Modules或者切换回普通CSS，其实不用eject也能完美解决SCSS变量、mixins共享的问题，给你几个实用方案：

方案一：自动全局注入共享SCSS资源（推荐中大型项目） #

Create-React-App本身不支持自动导入全局SCSS文件，但可以借助react-app-rewired来修改配置，不用eject就能实现。步骤很简单：

1. 先安装必要依赖：

npm install react-app-rewired sass-resources-loader --save-dev

2. 在项目根目录创建config-overrides.js文件，写入以下配置：

const path = require('path');
const { getLoader } = require('react-app-rewired');

module.exports = function override(config, env) {
  // 找到项目中的sass-loader配置
  const sassLoader = getLoader(
    config.module.rules,
    rule =>
      rule.test && rule.test.toString().includes('scss') &&
      rule.use && rule.use.some(u => u.loader && u.loader.includes('sass-loader'))
  );

  if (sassLoader) {
    // 添加sass-resources-loader自动注入全局文件
    const resourceLoader = {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          path.resolve(__dirname, 'src/styles/_variables.scss'), // 你的变量文件路径
          path.resolve(__dirname, 'src/styles/_mixins.scss')    // 你的mixins文件路径
          // 可以继续添加其他需要全局共享的SCSS片段文件
        ]
      }
    };
    sassLoader.use.push(resourceLoader);
  }

  return config;
};

3. 修改package.json里的启动脚本，替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

做完这些，所有组件的CSS Modules文件里都能直接用全局变量和mixins了，不用再手动@import！

方案二：手动导入共享文件（适合小型项目） #

如果不想额外安装依赖，最简单的方式就是在每个需要用到变量/mixins的组件SCSS文件顶部手动导入共享文件：

// 假设你的共享文件在src/styles目录下
@import '../styles/_variables.scss';
@import '../styles/_mixins.scss';

// 接下来就可以直接使用了
.my-component {
  background-color: $primary-bg;
  @include responsive-flex;
}

这个方法的缺点是每个组件都要写一遍导入语句，但胜在零配置，适合小型项目或者快速原型开发。

关于是否应该直接使用普通CSS？ #

我的建议是完全没必要放弃CSS Modules！CSS Modules最大的优势就是能彻底避免样式命名冲突，这在中大型项目里是刚需——想想看，如果你用全局CSS，后期修改某个组件样式时，很可能不小心影响到其他组件，维护成本会越来越高。

而SCSS的预编译能力（变量、mixins、嵌套）能极大提升开发效率，两者结合其实是React项目样式管理的最优解。只要解决了共享问题，体验会非常顺畅。

另外，如果你用的是Create-React-App v5及以上版本，也可以试试SCSS的@use和@forward语法来组织模块，不过全局注入的方式依然是最省心的方案。

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