【报Bug】App平台 v3 模式暂不支持在 js 文件中引用 scss

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.3.13

手机系统： iOS

手机系统版本号： iOS 15

手机厂商：苹果

手机机型： iphoneX

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

demo.scss

$demo-color: #ff0000;  

:export {  
    demoColor: $demo-color;  
}

main.js

import demoScss from '@/scss/demo.scss'  
Vue.prototype.$demoScss = demoScss

test.vue

<template>  
    <view class="test">  
        <view :style="{ color: demoScss.demoColor }">测试文字颜色</view>  
    </view>  
</template>  

<script>  
    export default {  
        computed: {  
            demoScss() {  
                return this.$demoScss;  
            }  
        }  
    };  
</script>

操作步骤：

v3模式下，js不支持导入scss变量

步骤1：在根目录中创建scss文件夹，新建demo.scss文件

demo.scss

$demo-color: #ff0000;  

:export {  
    demoColor: $demo-color;  
}

步骤2：在main.js中引入 `@/scss/demo.scss`，并把 `demoScss` 挂载在 `Vue` 原型上

main.js

import demoScss from '@/scss/demo.scss'  
Vue.prototype.$demoScss = demoScss

步骤3：在需要使用的vue页面中使用

test.vue

<template>  
    <view class="test">  
        <view :style="{ color: demoScss.demoColor }">测试文字颜色</view>  
    </view>  
</template>  

<script>  
    export default {  
        computed: {  
            demoScss() {  
                return this.$demoScss;  
            }  
        }  
    };  
</script>

结果

微信开发者工具可以实现文字变色
appV3模式下运行时，提示 App平台 v3 模式暂不支持在 js 文件中引用"@/scss/demo.scss" 请改在 style 内引用，且文字不变色

预期结果：

预期结果

微信开发者工具可以实现文字变色

appV3模式下运行时，文字也可以实现变色

实际结果：

结果

微信开发者工具可以实现文字变色

appV3模式下运行时，提示 `App平台 v3 模式暂不支持在 js 文件中引用"@/scss/demo.scss" 请改在 style 内引用`，且文字不变色

bug描述：

v3模式下，js不支持导入scss变量

场景需求是需要在js中引用scss，并不是 <script> 标签中引用scss

步骤1：在根目录中创建scss文件夹，新建demo.scss文件

demo.scss

$demo-color: #ff0000;  

:export {  
    demoColor: $demo-color;  
}

步骤2：在main.js中引入 `@/scss/demo.scss`，并把 `demoScss` 挂载在 `Vue` 原型上

main.js

import demoScss from '@/scss/demo.scss'  
Vue.prototype.$demoScss = demoScss

步骤3：在需要使用的vue页面中使用

test.vue

<template>  
    <view class="test">  
        <view :style="{ color: demoScss.demoColor }">测试文字颜色</view>  
    </view>  
</template>  

<script>  
    export default {  
        computed: {  
            demoScss() {  
                return this.$demoScss;  
            }  
        }  
    };  
</script>