React微前端中SCSS/SASS无法正常工作问题求助

问题原因 #

你在style.scss中使用@import url('_variable.scss')的方式导入变量文件，这种写法会让SCSS将其当作普通CSS的@import语句处理，不会解析文件内的SCSS变量（$base-color），导致body的背景色样式无法生效。

修复步骤 #

1. 修改style.scss中的导入语句，去掉url()：

// style.scss
@import '_variable.scss'; // 也可以简化为 @import 'variable';

body{
    background: $base-color;
}

2. 保留_variable.scss中的:export块（如果需要在React组件的JS代码中使用这个变量的话）：

// _variable.scss
$base-color: #c6538c;

:export{
    baseColor:$base-color;
}

这个:export是用来将SCSS变量导出为JS模块可用的对象，比如你可以在组件中这样使用：

import variables from './_variable.scss';

console.log(variables.baseColor); // 输出 #c6538c

额外说明 #

• SCSS中以下划线开头的文件（如_variable.scss）是局部文件，不会被单独编译成CSS，只能通过@import导入使用。
• 导入局部文件时，可以省略下划线和.scss后缀，直接写@import 'variable'即可。

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