uniapp scss变量导出如何使用

“在UniApp项目中，如何正确导出和使用SCSS变量？我已经在styles目录下定义了variables.scss文件，里面包含了一些颜色和尺寸变量，但在页面组件中通过@import引入后却无法使用这些变量。请问需要如何配置才能让所有页面和组件共享这些SCSS变量？是否需要特别配置vite或webpack？”

2 回复

在uni.scss中定义变量，然后在页面或组件中引入：

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

// 页面中使用
@import '@/uni.scss';
.text {
  color: $primary-color;
}

注意：需要安装sass-loader和node-sass依赖。


在 UniApp 中使用 SCSS 变量导出，可以通过以下步骤实现：

  1. 创建 SCSS 变量文件：在项目根目录或 common 文件夹下创建 variables.scss，定义变量：

    $primary-color: #007aff;
$font-size: 14px;

  2. 配置全局导入：在 vue.config.js 中配置 SCSS 加载器，将变量文件全局注入：

    module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/common/variables.scss";`
      }
    }
  }
};

  3. 在组件中使用变量：在任意组件的 <style lang="scss"> 中直接使用变量：

    .text {
  color: $primary-color;
  font-size: $font-size;
}

注意事项：

  • 确保路径正确（如 @/ 指向 src 目录）。
  • 修改配置后重启项目生效。
  • 适用于 UniApp 基于 Vue 的框架，HBuilderX 项目需检查配置支持。

这样即可全局使用 SCSS 变量，无需在每个文件中重复导入。

回到顶部