uni-app App平台 v3 模式暂不支持在 js 文件中引用 scss

示例代码：

$demo-color: #ff0000;  

:export {  
    demoColor: $demo-color;  
}

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

<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-color: #ff0000;  

:export {  
    demoColor: $demo-color;  
}

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

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

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

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

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

预期结果：

微信开发者工具可以实现文字变色
appV3模式下运行时，文字也可以实现变色

实际结果：

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

zlyuanteng 1楼•15 天前

来个人回复一下行吗？

gougou168 2楼•15 天前

还没有处理好吗？什么都用不了

zlyuanteng 3楼•15 天前

根本没人回，服了

phonegap100 4楼•15 天前作者

我跟你遇到了一样的问题，只能把颜色写死，如果后期要改颜色的话，只能一个文件一个文件的去改了

yuanlaile 5楼•15 天前

真垃圾啊现在还没解决

bupafengyu 6楼•15 天前

一样，现在样式全部失效了。官方也没有回复

ionicwang 7楼•15 天前

chvhhvvvjvj

sinazl 8楼•15 天前

希望官方支持一下

sinazl 9楼•15 天前

很多严重bug都没解决，这种需求估计是没法解决了，都几年了

phonegap100 10楼•15 天前作者

回复 7***@qq.com: 本来好好的，突然就提示这个报错，不能编译和调试 app 了，官方也没人回复

songsunli 11楼•15 天前

请问下这个问题有解决办法吗?

h691938207 12楼•15 天前

在 uni-app 的 App 平台 v3 模式下，确实存在一些限制，其中之一就是不支持在 .js 文件中直接引用 .scss 文件。这是因为 v3 模式是基于原生渲染的，而原生渲染的机制与 H5 或小程序平台有所不同，导致部分功能无法直接兼容。

解决方案

如果你需要在 .js 文件中使用样式相关的变量或逻辑，可以尝试以下方法：

1. 将样式变量提取到单独的 `.js` 文件中

将 .scss 文件中的变量提取到一个单独的 .js 文件中，然后在需要的地方引入。例如：

// styles/variables.scss
$primary-color: #007aff;

提取为：

// styles/variables.js
export const primaryColor = '#007aff';

在 .js 文件中引入：

import { primaryColor } from '@/styles/variables.js';
console.log(primaryColor); // 输出 #007aff

2. 使用 `uni.scss` 全局样式文件

uni-app 提供了 uni.scss 文件，可以在其中定义全局的 SCSS 变量，然后在 .vue 文件中使用。虽然无法直接在 .js 文件中使用，但可以通过 .vue 文件间接实现。

// uni.scss
$primary-color: #007aff;

在 .vue 文件中使用：

<template>
  <view :style="{ color: primaryColor }">Hello World</view>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '$primary-color', // 通过 CSS 变量传递
    };
  },
};
</script>

<style lang="scss">
.text {
  color: $primary-color;
}
</style>

3. 使用 CSS 变量

如果需要在 .js 文件中动态修改样式，可以使用 CSS 变量。在 .scss 中定义 CSS 变量，然后在 .js 中通过 document.documentElement.style.setProperty 修改。

// styles/variables.scss
:root {
  --primary-color: #007aff;
}

在 .js 文件中修改：

document.documentElement.style.setProperty('--primary-color', '#ff0000');

4. 使用平台条件编译

如果某些样式或逻辑只在特定平台生效，可以使用 uni-app 的条件编译功能。例如：

// #ifdef H5
import '@/styles/variables.scss';
// #endif