SASS中@use/@forward引入外部样式表的可行性及报错问题咨询

Sass @use/@forward 引入外部资源的问题说明 #

目前Sass的@use、@forward规则本身不支持直接加载HTTP/HTTPS协议的外部远程样式资源，这是和旧版@import规则的核心差异之一：

• @use设计初衷仅支持加载本地文件系统内的Sass/CSS模块，所有传入路径都会被识别为本地路径去解析，因此直接写远程CDN路径会被当做本地文件查找，触发「Can't find stylesheet to import」报错
• @use不支持url()参数写法，因此第二种写法会直接触发语法报错

可行替代方案

• 方案1：将所需样式包安装到本地项目后引入
  以normalize.css为例，先执行包管理命令安装依赖：

  npm install normalize.css
  

  再在Sass文件中通过本地路径引入即可：

  // 若构建工具支持~解析node_modules路径可直接这么写
  @use '~normalize.css';
  // 也可以写明确的相对路径
  @use '../node_modules/normalize.css/normalize.css';
  

• 方案2：保留CSS原生@import引入远程资源
  Sass完全兼容原生CSS的@import规则，只需要注意将远程资源的@import写在所有@use/@forward规则之后、其他业务样式之前即可：

  @use './common/variable';
  // 远程资源@import放在@use之后
  @import url(https://unpkg.com/normalize.css@7.0.0/normalize.css);
  

• 方案3：自定义Sass Importer（复杂场景适用）
  如果你使用的是Dart Sass，可以自行开发自定义Importer处理远程路径的拉取和加载，该方案开发成本较高，普通业务场景不推荐使用。

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