Sass中@import指令未生效、编译结果异常问题求助

原因 #

Sass默认会保留带.css扩展名的@import语句为原生CSS导入规则，不会对其进行内容合并处理，这是官方预设的兼容逻辑，避免破坏原生CSS的导入能力。

修复方案 #

• 将需要导入的content.css重命名为content.scss/content.sass，导入时可写全扩展名也可省略，Sass会自动合并内容。
• 不修改原文件扩展名的情况下，导入时省略.css后缀，写作@import 'content';即可触发Sass的导入合并逻辑。

当@import语句不带扩展名时，Sass会按照固定优先级匹配同目录下的文件：
content.scss > content.sass > 局部文件_content.scss > 局部文件_content.sass > content.css > 无扩展名的content文件
你当前目录下同时存在content.css和无扩展名的Bootstrap文件content，Sass会优先匹配优先级更高的content.css，因此最终导入的是content.css里的黄色背景样式，不会读取无扩展名的Bootstrap文件。

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