sass配置

在project.config.json文件下配置useCompilerPlugins:["sass"],.wxss文件更改为.scss

{
  ....
  "setting": {
    "useCompilerPlugins":["sass"],
    "coverView": true,
    "es6": true,
    ...
  }
  ...
}

如果报错，重新打开编辑器

路径别名配置

resolveAlias

• 使用 resolveAlias 配置项用来自定义模块路径的映射规则。
• 配置了之后，会对 require 里的模块路径进行规则匹配并映射成配置的路径。
• 如果命中多条映射规则，则取最长的命中规则。

{
  "resolveAlias": {
    "~/*": "/*",
    "~/origin/*": "origin/*",
    "@utils/*": "utils/*",
    "subBUtils/*": "subpackageB/utils/*"
  }
}

注意

1. resolveAlias 进行的是路径匹配，其中的 key 和 value 须以 /* 结尾。配置了上述路径映射规则，会做如下匹配并转换

• ~/mod.js -> mod.js
• ~/origin/mod.js -> origin/mod.js
• @utils/mod.js -> utils/mod.js
• subBUtils/mod.js -> subpackageB/utils/mod.js

2. 如果在 project.config.json 中指定了 miniprogramRoot，则 /* 指代的根目录是 miniprogramRoot 对应的路径，而不是开发者工具项目的根目录

自定义npm包

实现将npm包放在源码最外层

背景：实际开发中，随着项目越来越多、项目越来越复杂，文件目录也变得繁琐，为了方便进行项目开发，通常会将项目的目录结构进行优化，如：将源码放到miniprogram下

• packNpmManually:true表示允许自定义node_modules及miniprogram_npm位置
• packageJsonPath配置package.json的路径
• miniprogramNpmDistDir配置源码所在目录路径

配置完成后重新打开项目

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

配置步骤

• 创建miniprogram目录
• 将以下文件移到miniprogram目录下

配置小程序的源码目录 初始化package.json文件

配置packNpmManually，packNpmRelationList属性

安装vant

构建npm

配置后的目录