能否通过在线URL导入.scss变量？@import url引入失败如何解决

你在.scss文件中使用@import url('远程scss地址')无法读取变量，核心是Sass的预编译特性导致的：

• Sass变量、混合宏、嵌套规则等都属于预编译语法，必须在Sass转译为CSS的编译阶段完成解析，才能生成最终的浏览器可识别的CSS代码。直接写url形式的远程导入，本地/在线的Sass编译工具默认不会主动拉取远程文件内容参与编译，只会把这条@import规则原封不动保留到输出的CSS文件中。
• 等到浏览器运行时加载CSS时，拉取到的是原生的.scss源文件，浏览器本身不支持Sass语法，自然无法识别其中的变量定义，对应变量也就不会生效。
• 额外的可能原因：如果你的编译工具支持远程拉取，也可能是跨域限制导致无法正常获取远程.scss文件内容。

• 最稳妥的方案：直接把远程的variables.scss下载到本地项目的样式目录中，用本地相对路径导入即可，示例：@import './styles/variables.scss';，该方案不需要额外配置，也不会出现编译异常。
• 必须使用远程源的方案：在你的编译工具中配置支持远程scss导入的插件，比如webpack生态下可以给sass-loader配置sass-remote-importer插件，让Sass在编译阶段主动发起请求拉取远程文件内容参与编译，同时要保证远程服务端配置了对应跨域规则，允许你的编译环境拉取文件。
• 如果服务端支持将Sass变量编译为CSS原生变量（即--变量名: 变量值格式），你可以直接导入编译后的CSS文件，CSS原生变量是浏览器运行时支持的特性，直接用@import url()引入对应CSS地址即可正常使用。

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