最新版SASS/SCSS能否为@import配置路径变量？

当然可以实现啦！你想要用变量统一管理导入路径的思路完全没问题，只是需要调整一下语法细节——核心是用到SASS的插值语法（#{}），这是SASS里用来在字符串、选择器中插入变量值的关键语法。

下面分两种场景给你具体方案：

1. 针对@import的正确写法 #

你原来的代码错误在于没有用插值语法包裹变量，修正后就能正常工作：

// 定义路径变量
$mpath: "~/../../../node_modules/";
// 用#{ }插入变量拼接路径
@import "#{$mpath}bootstrap/scss/bootstrap";

这样SASS就会把$mpath的值替换进去，正确解析到你指定的node_modules路径下的bootstrap文件。

2. 更推荐的@use方式（最新SASS官方建议） #

从Dart Sass 1.23.0版本开始，官方就更推荐使用@use替代@import了——因为@import会把导入的所有内容混入当前作用域，容易引发变量污染、重复编译等问题，而@use采用模块化的导入方式，作用域更清晰。

用@use同样可以结合变量和插值语法：

$mpath: "~/../../../node_modules/bootstrap/scss";
// 导入bootstrap主模块
@use "#{$mpath}/bootstrap";
// 单独导入变量模块（如果需要）
@use "#{$mpath}/variables" as vars;
// 使用模块里的变量时，通过别名调用，避免冲突
body {
  background-color: vars.$primary;
}

额外小提示 #

如果你是用Webpack、Vite这类构建工具开发，其实还可以直接在工具配置里设置路径别名，比如：

• Webpack中在resolve.alias里添加："bootstrap-scss": path.resolve(__dirname, "node_modules/bootstrap/scss")
• Vite中在resolve.alias里添加："bootstrap-scss": path.resolve(__dirname, "node_modules/bootstrap/scss")

之后在SASS里就可以直接写@use "bootstrap-scss/bootstrap"，不用再写冗长的相对路径，体验会更顺畅～

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