原生微信小程序引入vant和sass

前言

之前做小程序项目时没有用任何的ui框架，css样式写了一大坨，非常不利于项目维护。因此在新项目中学习引入vant以及使用sass去编写样式

引入vant

vant官网中有比较详细的介绍 微信小程序使用vant

1.创建依赖文件

首先去建立一个package.json方便建立项目依赖

npm init

2.通过npm安装vant

npm i @vant/weapp -S --production

3.修改app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱

4.修改project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],
  },

5.构建npm包

6.使用button示例

在json中引入组件地址

"van-button": "@vant/weapp/button/index"

wxml代码

<van-button type="primary">按钮</van-button>

原生微信小程序使用sass

1.插件安装

首先确保你的vscode中安装了Easy-Sass,如果你要使用less就去安装Easy-Less

2.小程序工具中引入插件

选择Easy-Sass

3.编辑setting.json

    "easysass.formats": [
    

        {
            "format": "expanded",
            "extension": ".wxss"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }    //这个不去掉会在同级文件夹下生成.min.css文件，去掉
    ]

4.忽略.scss文件上传

在project.config.json文件中写入

  "packOptions": {
    "ignore": [
      {
        "type": "file",
        "value": ".eslintrc.js"
      },
      {
        "type": "regexp",
        "value": "\\.scss$"
      },
      {
        "type": "file",
        "value": "package-lock.json"
      }
    ]
  },

看下效果

当你新建一个index.scss文件保存时，会自动新增一个同名wxss文件