SCSS主文件引入外部_colors.scss样式后页面无变化如何解决

你代码里存在3个核心错误： #

• 变量作用域错误：你把$background-color定义在了body选择器内部，属于局部变量，只能在当前body代码块内部访问，外部和其他导入文件都无法调用这个变量。
• 关键字使用错误：@include是用来调用@mixin混合宏的专用关键字，不能用来导入文件，导入Sass局部文件应该使用@import（旧版本Sass）或@use（Dart Sass 新版本推荐）。
• 样式未绑定到属性：你仅在body代码块里定义了变量，没有把变量赋值给background-color样式属性，自然不会生效。

修复后的代码 #

1. 修改 _colors.scss #

把变量定义在全局作用域，同时绑定到对应的样式属性：

// 全局作用域定义变量，所有导入该文件的地方都能调用
$background-color: maroon;

body {
  // 把变量赋值给背景色属性，样式才会生效
  background-color: $background-color;
}

2. 修改 main.scss #

替换导入关键字为文件导入专用的@import：

// 同目录下的局部文件导入可省略下划线和.scss后缀
@import 'colors';

补充注意事项 #

• 局部文件开头的下划线仅作用是告诉Sass编译器不要单独把该文件编译为独立CSS文件，导入时省略下划线是正确写法，不需要额外调整。
• 关键字不要混用：@import/@use 负责导入外部文件/模块，@include 仅负责调用提前定义好的@mixin混合宏。
• 若确实需要在选择器内部定义全局变量，可以加!global标识（非常不推荐），写法为 $background-color: maroon !global;，建议全局变量统一放在文件顶部无选择器包裹的区域。

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