Yii2高级版SCSS文件@use语法使用异常问题求助

你的问题主要出在SCSS编译配置缺失、@use变量引用规则错误以及变量名不匹配这几个点上，以下是具体解决步骤：

1. 补全AssetConverter的SCSS编译命令 #

你的Yii2配置里只定义了less的编译命令，没有配置scss的处理规则，导致框架不会编译scss文件。修改assetManager配置，添加scss的编译命令：

'assetManager' => [
    'converter' => [
        'class' => 'yii\web\AssetConverter',
        'commands' => [
            'less' => ['css', 'sass {from} {to} --source-map'],
            // 新增SCSS编译规则
            'scss' => ['css', 'sass {from} {to} --source-map'],
        ],
    ],
],

2. 修正SCSS变量的引用逻辑 #

使用@use引入文件时，变量默认属于该文件的命名空间，不能直接裸用，有两种解决方式：

方式一：通过命名空间访问变量 #

在_theme.scss里，通过variables.前缀访问_variables.scss中的变量：

.text-lc-orange {
    color: variables.$color-orange;
}

方式二：导入变量到当前作用域 #

如果不想每次写命名空间，可以在@use时添加as *，把目标文件的变量全部导入当前作用域：

• 方案A：在common.scss中修改引入方式

@use 'variables' as *;
@use 'theme';

• 方案B：在_theme.scss中单独引入变量文件

@use 'variables' as *;
.text-lc-orange {
    color: $color-orange;
}

3. 修正变量名不匹配问题 #

你在_variables.scss中定义的变量是$color-orange，但在_theme.scss里写的是$orange，变量名完全不匹配，这是核心错误之一，必须统一变量名。

额外检查项 #

• 确认服务器环境已安装sass命令行工具，执行sass --version可验证，没有的话需要先安装。
• 清理Yii2的asset缓存：删除@webroot/assets目录下的所有文件，避免旧缓存影响结果。

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