uniapp vue3中如何用js读取scss变量

在uniapp结合vue3的项目中，如何通过JavaScript动态读取.scss文件中定义的全局变量？比如我在_variables.scss中设置了$primary-color: #1890ff，现在需要在js逻辑中获取这个颜色值进行条件判断。尝试过直接import但报错，官方文档也没有明确说明。请问正确的实现方式是什么？需要安装额外插件吗？

2 回复

在Vue3中，可以通过在scss文件中导出变量，然后在js中导入使用。

scss文件：

:export {
  primaryColor: #007bff;
  fontSize: 14px;
}

js文件：

import styles from './variables.module.scss'
console.log(styles.primaryColor) // #007bff

在 UniApp + Vue 3 中，直接通过 JavaScript 读取 SCSS 变量需要借助构建工具或插件。以下是两种常用方法：

1. 使用 sass-resources-loader 配置全局注入

通过 Webpack 配置将 SCSS 变量注入到每个组件，然后在 JS 中通过 CSS 模块读取。

步骤：

  1. 安装依赖：
npm install sass sass-resources-loader --save-dev
  1. 在 vue.config.js 中配置（如无此文件需手动创建）：
const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 全局 SCSS 文件路径
      }
    }
  }
};
  1. 在 JS 中读取变量（通过 CSS 自定义属性）：
// variables.scss
:root {
  --primary-color: #007bff;
}

// 在 Vue 组件中
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
console.log(primaryColor); // 输出 "#007bff"

2. 使用 CSS Modules + SCSS 导出变量

通过 SCSS 导出变量到 JS 可访问的对象。

步骤：

  1. 创建 SCSS 文件（如 variables.module.scss）：
:export {
  primaryColor: #007bff;
  fontSize: 16px;
}
  1. 在 Vue 组件中导入：
<script setup>
import variables from '@/styles/variables.module.scss';

console.log(variables.primaryColor); // 输出 "#007bff"
console.log(variables.fontSize);      // 输出 "16px"
</script>

注意事项：

  • 方法 1 适用于全局变量，但需通过 DOM 操作读取。
  • 方法 2 更直接，但需要为每个文件单独导入。
  • 确保 HBuilder X 或 CLI 项目已正确配置 SCSS 支持。

推荐使用方法 2，无需操作 DOM，且类型安全。

回到顶部