如何让含@import引用的style.scss与样式表正常关联？Sass配置求助

1. 先安装Sass（核心工具缺失） #

你装了Homebrew但没装Sass，这是关键——Sass是把.scss文件编译成浏览器能识别的.css的工具，仅靠Git和Homebrew无法实现scss到css的转换。在终端运行：

brew install sass/sass/sass

安装完验证：

sass --version

能显示版本号即为安装成功。

2. 检查scss文件的导入语法 #

你的style.scss是主编译入口，需正确导入其他下划线开头的partial文件（这类文件不会单独编译）：

• 用@use语法（Sass官方推荐的新规范）：

  @use 'variables';
  @use 'globals';
  @use 'header';
  

  同目录下无需加下划线和.scss后缀，Sass会自动匹配对应文件。
• 若习惯用@import语法也可：

  @import 'variables';
  @import 'globals';
  @import 'header';
  

3. 编译Sass到dist文件夹 #

必须将scss编译为css，否则dist里的style.css要么为空要么是旧内容，浏览器无法读取新样式：

• 手动编译测试：在项目根目录（app和dist所在的文件夹）运行：

  sass app/scss/style.scss dist/style.css
  

  执行后查看dist/style.css，应有编译后的样式内容。
• 实时监听自动编译（开发时推荐，修改scss自动同步css）：

  sass --watch app/scss/style.scss:dist/style.css
  

  运行后不要关闭终端，修改scss文件会自动更新dist/style.css。

4. 检查HTML的样式文件路径 #

确认HTML中link标签的路径与文件实际位置匹配：

• 若HTML在项目根目录：

  <link rel="stylesheet" href="dist/style.css">
  

• 若HTML在app文件夹内：

  <link rel="stylesheet" href="../dist/style.css">
  

  可通过浏览器开发者工具的「网络」面板查看style.css的请求状态，若显示404则说明路径错误。

5. 解决直接修改style.css无效果的问题 #

这大概率是浏览器缓存导致，Mac上按下Cmd+Shift+R强制刷新页面，或在开发者工具中勾选「禁用缓存」（右键刷新按钮即可找到该选项）。

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