uni-app使用插件uView报错Undefined variable.$u-border-color

2022-08-22

uni-app HBuilderX导入插件uView后，运行项目报错信息：

15:20:33.960   Error: Undefined variable.
15:20:33.966      ╷
15:20:33.966   38 │     border-color: $u-border-color!important;

原因是用工具导入方式，还需要进行正确配置才能使用。

1. 引入uView主JS库

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

2. 在引入uView的全局SCSS主题文件

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';


3. 引入uView基础样式

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

4. 配置easycom组件模式

// pages.json
{
	// 如果您是通过uni_modules形式引入uView，可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

更详细的配置介绍见官网：https://www.uviewui.com/components/downloadSetting.html

（版权归cpury.com所有，转载请注明出处。）

WEB开发