Syntax Error: SassError: Undefined variable. ╷ 314 │ color: $u-primary； │

项目场景：

使用Uni-app创建文件并使用Uview引用scss报错

---

问题描述

安装sass后 启动会报 找不到这个东西

---

原因分析：

1.可能是配置全局引用没有完整

查看自己是否全局引用完整

1.安装依赖

// 安装sass
npm i sass -D

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

2.安装uview-ui

npm install uview-ui
默认版本为1.X
官网默认打开为2.x
如果使用官网默认打开页面的组件 请安装2.X版本
npm install uview-ui@2.0.31

3.配置文件

3.1.main.js

在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

3.2在引入uView的全局SCSS主题文件 uni.scss

在项目src目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';

3.3 引入uView基础样式 App.vue

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

3.4 配置easycom组件模式(可以不用引用组件直接用)pages.json

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

3.5Cli 项目根目录的vue.config.js文

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

2.安装版本不一样

安装1.X版本但使用的是2.X组件

1.查看你安装Uview的版本为多少

在package.json

解决方案：

1.如果全局没配置就配置全局
2.全局配置了版本不一样，就去更改版本

在cmd项目路径下（安装过uview-ui）
先卸载
npm uninstall uview-ui
安装2.X版本
npm install uview-ui@2.0.31

这篇好文章是转载于：学新通技术网