Laravel项目中SASS不同导入方式的区别、符号含义及最佳实践咨询

特殊符号作用说明 #

~ 符号 #

Laravel项目默认使用Laravel Mix（基于webpack封装）构建前端资源，~是webpack的sass-loader内置的路径别名，作用是告诉SASS编译器跳过相对路径查找逻辑，直接到项目根目录的node_modules文件夹下定位资源，无需手动写多层相对路径定位到node_modules。

@ 符号 #

分两种场景：

• 如果@是导入路径开头包名的一部分（比如例子中的@fortawesome），属于npm的作用域包标识，是npm官方用来区分不同组织/作者发布的包的命名规则，避免包名重复冲突，这类包在node_modules里会存放在对应作用域的文件夹下，比如node_modules/@fortawesome/
• 如果是单独使用@/xxx格式的路径，是webpack自定义别名，Laravel项目中通常会配置为指向resources/js或者resources/sass目录，用来简化内部资源的导入路径，避免写多层../../的相对路径。

不同导入写法的区别 #

1. @import '~bootstrap/sass/bootstrap'; #

• 功能：从node_modules中导入Bootstrap的SASS源码，参与项目的SASS编译流程
• 特点：你可以在导入这条语句之前自定义Bootstrap的变量，直接覆盖框架默认样式，最终所有样式会被打包到项目的单CSS输出文件中，不会产生额外的网络请求
• 适用场景：导入需要自定义样式、需要参与项目构建的第三方SASS依赖包

2. @import 'variables'; #

• 功能：按照SASS默认路径规则，查找并导入项目内部的SASS局部文件
• 特点：编译器只会在当前SASS文件所在目录、或者你提前在sass-loader配置的includePaths目录下查找资源，会自动匹配带.scss/.sass后缀、下划线开头的局部文件（比如_variables.scss，这类文件不会被单独编译为CSS，只能被导入引用）
• 适用场景：导入项目内部自定义的公共变量、混合宏、通用样式片段

3. @import url('https://fonts.googleapis.com/css?family=Nunito'); #

• 功能：原生CSS标准导入语法，从远程CDN地址加载CSS资源
• 特点：不会被SASS编译器处理，打包后会保留原语句，用户访问网站时会单独发起HTTP请求加载远程资源
• 适用场景：导入无需自定义、依赖公共CDN分发的资源，比如第三方字体、通用公共样式库

补充：@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; #

这个写法中，~仍然是定位到node_modules目录，@fortawesome是npm作用域包名的一部分，编译器最终会定位到node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss这个文件。

最佳实践 #

• 第三方SASS依赖包如果需要自定义样式，统一用~前缀导入，避免手写冗长的相对路径
• 项目内部的SASS资源优先用相对路径导入，如果项目配置了@别名指向资源目录，可以统一用@/xxx的写法简化路径
• 远程CSS资源尽量少用@import url()导入，这类语句会阻塞页面渲染，增加额外的网络请求；如果资源体积小、需要自定义，建议下载到本地后导入
• SASS变量、混合宏的导入语句要放在所有样式导入的最前面，确保后续样式可以正常调用变量
• 不要在SASS文件中重复导入同一个资源，避免打包后出现冗余样式

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