使用 uniapp-uview-ui 的时候 ,SassError: Undefined variable: “$u-border-color“

项目场景：

在测试使用 uniapp-uview-ui 的时候,测试运行报错

10:50:59.465 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
10:50:59.465 SassError: Undefined variable: "$u-border-color".
10:50:59.469         on line 38 of E:/HBuilderProjects/test_uview_ui/uview-ui/libs/css/common.scss
10:50:59.469         from line 2 of E:/HBuilderProjects/test_uview_ui/uview-ui/index.scss
10:50:59.471         from line 70 of E:\HBuilderProjects\test_uview_ui\App.vue
10:50:59.471 >> 	border-color: $u-border-color!important;
10:50:59.474    ---------------^
10:50:59.474 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
10:50:59.476 SassError: Undefined variable: "$u-content-color".
10:50:59.476         on line 244 of E:\HBuilderProjects\test_uview_ui\uview-ui\components\u-loading-icon\u-loading-icon.vue
10:50:59.479 >> $u-loading-icon-text-color:$u-content-color !default;
10:50:59.482    ---------------------------^
10:50:59.485 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
10:50:59.488 SassError: Undefined variable: "$u-info".
10:50:59.488         on line 12 of E:/HBuilderProjects/test_uview_ui/uview-ui/components/u-button/vue.scss
10:50:59.491         from line 348 of E:\HBuilderProjects\test_uview_ui\uview-ui\components\u-button\u-button.vue
10:50:59.491 >> $u-button-plain-u-button-info-color:$u-info;
10:50:59.494    ------------------------------------^
10:50:59.497 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
10:50:59.497 SassError: Undefined variable: "$u-primary".
10:50:59.501         on line 203 of E:\HBuilderProjects\test_uview_ui\uview-ui\components\u-icon\u-icon.vue
10:50:59.501 >> $u-icon-primary: $u-primary !default;
10:50:59.504    -----------------^

---

问题描述

在网上找解决方案,大家的方案都不太适用
尝试过的方案

• 检查 uview-ui 的所在路径和引入中写的是否一致
• 重启 HX
• 确保安装了 scss/sass 插件
• 在根目录下 uni.scss 文件中引入 theme.scss
• 确保在根目录下 App.vue 文件中添加 lang=“scss” 和 index.scss
• 在引入全局样式的时候Sass加载不到 (npm init / npm install sass-resources-loader --save-dev)

原因分析：

后来,发现自己引入的语句写错了,真的是很无厘头,在引入的时候自动补全没看清,所以特此记录

在引入 uView 的全局 SCSS 主题文件的时候,在项目根目录的 uni.scss中引入此文件.

错误引入

/** uni.scss 错误引入*/
@import url("uview-ui/theme.scss");

正确引入

/** uni.scss 错误引入*/
@import "uview-ui/theme.scss";

---