uniapp scss文件中:export的使用方法是什么

在uniapp的scss文件中，我看到有人使用:export语法，但官方文档里没有找到相关说明。请问:export具体是做什么用的？能否举例说明如何在scss中通过:export导出变量，以及在js里如何正确引入这些变量？使用时需要注意哪些兼容性问题吗？

2 回复

在uni-app的scss文件中，:export用于导出变量给JS使用。

// scss文件
$primary-color: #007aff;
:export {
  primaryColor: $primary-color;
}

// js文件
import styles from './style.scss';
console.log(styles.primaryColor); // #007aff

注意：需要配置webpack的css-loader支持。


在 UniApp 的 SCSS 文件中，:export 是一个特殊语法，用于将 SCSS 变量导出为 JavaScript 可访问的对象。这在 UniApp 中常用于在 Vue 组件中共享 SCSS 变量（如颜色、尺寸等）。

使用方法：

  1. 定义 SCSS 变量：在 .scss 文件中声明变量。
  2. 使用 :export 块：通过 :export 导出变量到 JavaScript。
  3. 在 Vue 组件中导入：通过 import 引入 SCSS 文件并访问导出的对象。

示例代码：

  1. SCSS 文件（如 variables.scss）：
$primary-color: #007aff;
$font-size: 16px;

:export {
  primaryColor: $primary-color;
  fontSize: $font-size;
}
  1. Vue 组件中导入并使用：
import variables from '@/styles/variables.scss';

export default {
  data() {
    return {
      primaryColor: variables.primaryColor, // 访问导出的变量
      fontSize: variables.fontSize
    };
  }
};

注意事项：

  • 确保在 vue.config.js 中配置了 SCSS 加载器（UniApp 默认支持）。
  • 导出的变量名在 :export 中需使用 camelCase（如 primaryColor），对应 SCSS 变量（如 $primary-color）。
  • 仅支持导出基本类型（字符串、数字等），不支持复杂对象或函数。

通过 :export，可以方便地在 JS 和 SCSS 之间共享样式变量，保持项目一致性。

回到顶部