当前位置：首页 > article >正文

uniapp中uni.scss如何引入页面内或生效

article 2024/12/26 4:08:08

介绍

uniapp中uni.scss不需要引用自动会生效，前提是安装了scss.

解决方法

在 UniApp 项目中，如果需要在页面的 SCSS 中使用 uni.scss 定义的变量，需要确保全局变量文件 uni.scss 被正确加载。

步骤：

1. 确保变量定义正确

首先检查 uni.scss 文件中的变量是否正确定义，并且没有语法错误：

// uni.scss
$uv-theme-purple: #936AFF;
$uv-theme-gray: #EEEFF4;
$uv-theme-brown: #714509;
$uv-theme-silver: #9FA2B3;
$uv-theme-bg: #F6F7F9;

2. 在 `uni.scss` 中定义全局变量

uni.scss 是 UniApp 项目的全局样式文件。为了使这些变量在其他页面中生效，你需要正确引入 uni.scss。

全局引入 `uni.scss`

在 pages.json 文件中配置全局样式文件：

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#F8F8F8",
    "style": "v3",
    "scss": {
      "preprocessorOptions": {
        "additionalData": "@import '@/uni.scss';"
      }
    }
  }
}

或者在 main.js 中手动引入：

import '@/uni.scss';

3. 检查 SCSS 文件是否使用了局部作用域

如果你在 Vue 单文件组件的 <style lang="scss"> 标签中使用了 scoped，可能导致变量无法被解析。

<style lang="scss" scoped>
.home-container {
  color: $uv-theme-silver; // scoped 可能导致无法识别全局变量
}
</style>

解决方法：
移除 scoped，或者在全局样式文件中定义样式。

<style lang="scss">
.home-container {
  color: $uv-theme-silver;
}
</style>

4. 使用 `@import` 引入变量文件

如果全局变量依然无法识别，你可以在需要使用这些变量的文件中手动引入 uni.scss：

@import '@/uni.scss';

.home-container {
  color: $uv-theme-silver;
}

注意：路径 @/uni.scss 需要根据项目目录结构调整。

5. 检查依赖版本和兼容性

确保项目中安装了 SCSS 相关依赖：

npm install sass sass-loader -D

检查 vite.config.js 是否配置了正确的预处理器选项：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [uni()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/uni.scss";`, // 全局引入
      },
    },
  },
});