升级新版sass（1.8.0以上）问题

前言问题

将 Sass 升级到 1.8.0 及以上版本后，你可能会遇到如下警告：

• sass 1.8.0 不再支持 @import 需要使用 `@use’
• sass 1.8.0 不再支持老的 js api 接口 修改：

// 修改配置文件
css: {
    preprocessorOptions: {
        scss: {
            api: 'modern-compiler', // 修改api调用方式
        },
    },
}

原因： Sass到1.8.0版本以上后@import已被废弃，改用@use和@forward

@import缺陷

• 命名冲突

// file1.scss
$color: red;

// file2.scss
$color: blue;

// main.scss
@import 'file1.scss'
@import 'file2.scss'
// 此时$color是blue

如上代码会导致命名冲突，变量覆盖的问题。因为@import是全局性的，而不是模块化的。

• 重复导入

@import会重复导入。因为@import并不关心导入的文件是否已经导入过。重复导入会降低编译速度。

模块系统 @use、@forward

sass中文网

• @use规则

@use 'colors.scss';
$theme-color: red;

div {
    color: colors.$theme-color; // 使用命名空间访问colors.scss文件中的变量
}

以上方式对于老项目迁移是个难题，改动太大。可以使用as * 语法，将所有成员直接导入进来。

@use 'colors.scss' as *;
$theme-color: red;

div {
    color: $theme-color; // 直接使用colors.scss文件中的变量
}

@use会为我们自动创建命名空间，以避免全局带来的冲突和污染。

• @forward规则