uni-app中【报Bug】vue组件js中引入scss变量会导致当前组件的样式失效

uni-app中【报Bug】vue组件js中引入scss变量会导致当前组件的样式失效 产品分类：

• uniapp/小程序/微信

PC开发环境操作系统：

• Windows

PC开发环境操作系统版本号：

• win10

HBuilderX类型：

• 正式

HBuilderX版本号：

• 3.3.3

第三方开发者工具版本号：

• 1.05.2110290

基础库版本号：

• 2.21.1

项目创建方式：

• HBuilderX

示例代码：

uni.scss

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #01847f;
$uni-color-primary-darker: #007d00;
$uni-color-primary-lighter: #80ff80;

:export {
    uni_color_primary: $uni-color-primary;
    uni_color_primary_darker: $uni-color-primary-darker;
    uni_color_primary_lighter: $uni-color-primary-lighter;
}

组件中添加引入变量

import {uni_color_primary} from '@/uni.scss';

操作步骤：


1. 在uni.scss中添加变量并导出
2. 在目标组件中使用import引入scss变量

预期结果：

不影响当前组件的样式

实际结果：


当前组件的样式因语法报错失效

bug描述：

看了一下编译出来的wxss会多出一行@charset “UTF-8”，这一行的尾部没有分号’;’ 这导致了后面的样式语法报错‘semi-colon expected’，所以样式失效

另，我临时在当前组件的style标签添加了lang="scss"用作应急处理，仅供参考