基于create-react-app alpha版的React CSS Modules+SCSS全局混合配置咨询

首先直接给结论：你当前的配置能够正常生效，但从代码可读性和最佳实践的角度来看，有更直观的实现方式，下面具体分析：

为什么当前配置能生效？ #

在CSS Modules规则里，:global() 包裹的代码会被视为全局样式，不会被添加模块化的哈希类名。你通过 :global(:root) { @import "./sass/site.scss"; } 的写法，把 site.scss 里的样式注入到全局的 :root 选择器下，确实能让这些样式全局生效，再通过在 index.js 导入 index.module.scss，就能成功加载这些全局样式。

需要注意的细节 #

• 路径正确性：务必确认 ./sass/site.scss 的相对路径是准确的（相对于 index.module.scss 的位置），否则会出现文件找不到的编译错误。
• CRA Alpha版本稳定性：由于你使用的是create-react-app的alpha版本，虽然CSS Modules和SCSS的支持已经比较成熟，但还是要留意版本可能存在的兼容性问题，若项目允许，建议尽量使用稳定版。

更优的实现方式 #

其实不需要通过模块化的 .module.scss 文件中转全局样式，直接创建不带 .module 后缀的SCSS文件作为全局样式文件即可：

1. 保留你的 ./sass/site.scss 全局样式文件
2. 在 index.js 中直接导入这个全局样式：

import './sass/site.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// ...其他导入代码

这种方式更直观，也符合CRA中全局样式的常规用法——不带 .module 后缀的样式文件默认就是全局生效的，不需要额外用 :global() 包裹。

总结 #

你的原配置是正确且能生效的，但推荐使用直接导入全局SCSS文件的方式，让代码结构更清晰易懂。

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