准备 sass

在style标签中加入

  1. // index/index.vue
  2. <style lang="scss" scoped>
  3. .content {
  4.   background: red;
  5. }
  6. </style>

控制台这时候会报错，node-sass不存在
image.png
解决方案：安装yarn add sass sass-loader -D
再次运行，报错没有了，说明我们可以直接使用sass来编写我们的style样式了。 :::warning 如果 node 版本小于 16 ，sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12(opens new window)如果 node 版本大于 16 ， sass-loader 建议使用 v8.x 版本 :::

安装uni-ui

yarn add @dcloudio/uni-ui

配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：

  1. // pages.json
  2. {
  3.   "easycom": {
  4.     "autoscan": true,
  5.     "custom": {
  6.       // uni-ui 规则如下配置
  7.       "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
  8.     }
  9.   },
  11.   // 其他内容
  12.   pages:[
  13.     // ...
  14.   ]
  15. }

配置vue.config.js

:::warning 注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效 ，导致组件异常 需要在根目录创建 vue.config.js 文件 ，增加 @dcloudio/uni-ui 包的编译即可正常 :::

  1. // vue.config.js
  2. module.exports = {
  3.   transpileDependencies:['@dcloudio/uni-ui']
  4. }

在 template 中使用组件：

  1. <uni-badge text="1"></uni-badge>
  2. <uni-badge text="2" type="success" @click="bindClick"></uni-badge>
  3. <uni-badge text="3" type="primary" :inverted="true"></uni-badge>

可以看到效果如下：
image.png

uni.scss使用

uni.scss文件里面定义一些默认的变量，我们可以直接在样式当时使用，无需单独引入，比如下面这样的

  1. <style lang="scss" scoped>
  2. .content {
  3.   .title {
  4.     color: $uni-color-primary;
  5.   }
  6. }
  7. </style>

扩展知识