uniapp scss export如何使用

在Uniapp中如何使用SCSS的export功能？我在项目中尝试通过@export共享变量到其他SCSS文件，但始终不生效。请问正确的引入方式和配置是什么？是否需要特别设置vue.config.js或修改loader配置？求具体实现代码示例。

2 回复

在uni-app中使用SCSS的@export，需要在vue.config.js中配置：

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

然后在SCSS文件中定义变量：

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

页面中直接使用变量即可：

.text {
  color: $primary-color;
}

在 UniApp 中使用 SCSS 的 @export 功能，主要是为了导出 SCSS 变量到 JavaScript 中，方便在 JS 逻辑中复用样式变量。以下是详细使用方法：

1. 安装依赖

确保项目已安装 sass 和 sass-loader：

npm install sass sass-loader --save-dev

2. 配置 SCSS 导出

在 vue.config.js 中配置（如无此文件，请在项目根目录创建）：

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

3. 定义 SCSS 变量并导出

在 variables.scss 文件中定义变量并使用 :export 块导出：

// 定义 SCSS 变量
$primary-color: #007aff;
$font-size: 16px;

// 导出到 JS
:export {
  primaryColor: $primary-color;
  fontSize: $font-size;
}

4. 在 Vue 组件中使用导出的变量

在 <script> 中导入 SCSS 文件，并通过 computed 或直接访问导出的对象：

<template>
  <view :style="{ color: styles.primaryColor, fontSize: styles.fontSize + 'px' }">
    文本内容
  </view>
</template>

<script>
import styles from '@/styles/variables.scss';

export default {
  computed: {
    styles() {
      return styles;
    }
  }
};
</script>

注意事项：

  • 仅导出简单值：:export 支持字符串、数字等基本类型，不支持嵌套对象或复杂计算。
  • HBuilderX 用户：如使用 HBuilderX，确保在「设置-插件配置-scss/sass 编译」中启用相关功能。
  • 路径问题：@ 默认指向项目 src 目录，若路径错误请根据项目结构调整。

通过以上步骤，即可在 UniApp 中实现 SCSS 变量导出到 JS 的功能，统一管理样式和逻辑中的变量。

回到顶部