Rails 7中Sass文件是否需重复导入？变量引用问题求助

核心问题分析 #

你遇到的两个问题根源在于Rails资产管道对Sass文件的处理逻辑和Bootstrap变量重写的顺序要求：

1. 非局部文件的独立编译：你自定义的theme.scss、colors.scss、sidebar.scss没有以下划线开头，Rails会将它们视为独立的可编译资产文件。开发环境下，资产缓存过期后，这些文件会被单独编译，此时sidebar.scss因未导入Bootstrap，自然找不到$blue-600变量。
2. 变量重写顺序错误：你先导入Bootstrap再重写$primary，但Bootstrap的变量用!default声明——只有变量未定义时才会使用默认值。先导入Bootstrap会提前定义变量，后续的重写根本不会生效；而sidebar里重复导入Bootstrap，又会重新加载默认变量，覆盖你想要的自定义值。

具体解决方案 #

1. 将自定义SCSS改为局部文件

把所有自定义SCSS文件重命名为下划线开头的局部文件：

• theme.scss → _theme.scss
• colors.scss → _colors.scss
• sidebar.scss → _sidebar.scss

Rails资产管道不会单独编译局部文件，只会通过主文件的@import合并处理，彻底避免单独编译时的变量缺失问题。修改后的application.scss无需改动导入语句（Sass会自动识别下划线文件，导入时可省略下划线）：

@import 'theme';
@import 'bootstrap';
@import 'colors';
@import 'sidebar';

2. 调整变量重写与Bootstrap的导入顺序

要让Bootstrap识别自定义变量，必须在导入Bootstrap之前导入变量重写文件。调整application.scss的导入顺序：

@import 'theme';
@import 'colors'; // 先导入变量重写，提前定义$primary
@import 'bootstrap'; // 再导入Bootstrap，此时会使用你定义的$primary而非默认值
@import 'sidebar';

3. 移除子文件中重复的Bootstrap导入

现在所有局部文件都会通过application.scss合并编译，sidebar.scss里无需再导入Bootstrap，直接使用$blue-600变量即可，不会再出现变量未找到的错误。

4. 验证资产预编译配置

确保config/initializers/assets.rb中没有将局部文件加入预编译列表，只保留主文件即可（默认配置已满足）：

Rails.application.config.assets.precompile += %w( application.css )

关于开发环境缓存的说明 #

开发环境下Rails会缓存编译后的资产，首次刷新时使用的是合并后的application.css，所以变量能正常访问；缓存过期后，Rails会尝试单独编译非局部文件，这才触发了变量未找到的错误。改成局部文件后，就不会触发单独编译流程了。

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