wxa.js 默认使用的样式语言是 scss，所以其默认创建的项目就会要求安装 node-sass，但由于 node-sass 依赖了 binding.node 等包，导致常常会出现 node-sass 安装失败的问题。

如果你并没有在项目中使用 scss ，则可以考虑将你项目种的 node-sass 移除，从而缩小项目的依赖体积，提升项目安装成功的概率。

思路

由于 wxa 默认使用了 scss，因此，我们需要移除项目中针对 scss 的配置，并移除代码中的 scss ，这样才能保证后续在编译的过程中，不会调用 node-sass 的依赖。

步骤

1. 移除 wxa.config.js 中关于 scss 的配置

在 wxa 的默认配置中，配置了 sass/scss 的依赖，我们如果不移除这个依赖，就会导致后续在构建的时候，自动安装相关依赖。

因此，我们需要在 wxa.config.js 中添加 use 相关配置，且仅保留 babel 作为依赖，具体修改如下：

module.exports = {
    plugins: [
        new ReplacePlugin({
            list: envlist,
        }),
    ],
    // 你的其他配置
    use: [
        {
            test: /\.js$/,
            name: 'babel',
        },
    ],
    // 你的其他配置
};

2. 移除项目中标记为 Scss 的语言

在移除了 wxa.js 的构建依赖后，接下来需要移除代码中关于 scss 的标示，从而使我们的代码可以被正确的渲染工具所渲染。具体修改如下所示，右侧为修改后的结果

3. 移除 package.json 中的 相关依赖。

当我们完成了上述的操作之后，就可以放心的移除系统中关于 sass 的依赖了，从而减少整个项目的体积和对 node-sass 的依赖。

你只需要执行如下的命令，就可以移除项目中关于 sass 的依赖了。

npm uninstall @wxa/compiler-sass
// 或者
yarn remove @wxa/compiler-sass

总结

scss是一个好的语言，但 node-sass 却不是一个好的工具，如果你不使用它，不妨将其移除，提升你的项目构建速度。

TailwindCSS 是我最近一段时间使用比较多的 CSS 框架，相比于传统我们习惯的前端框架，它的限制更少，你可以根据自己的需要来编写样式。如果你配置了清除没用到的 CSS，TailwindCSS 的体积甚至可以远小于其他框架。

也因为上面的这些因素，我也自然而然的会选择将其放在小程序中来使用。而由于我使用的是 wxa.js ，所以这里也是一个对应的 wxa.js 的教程。

安装

1. 安装 TailiwndCSS 到你的项目中

由于 Taildwind 默认推荐使用的是 PostCSS，但其需要的是 PostCSS 7 或者 8 ，但 WXA.js 提供的 PostCSS 插件使用的是 6 ，所以这里我就选择不将其作为 PostCSS 插件来安装。

在 WXA 项目根目录中执行如下命令，会在你的项目根目录中生成一个 tailwindcss.config.js，它会作为后续你的项目配置的配置文件。

npx tailwindcss-cli@latest init

随后，在你的项目根目录创建一个 tailwind.css 文件，并在其中加入如下代码，这个文件作为你后续样式基础文件。

@tailwind base;
@tailwind components;
@tailwind utilities;

添加完成后，你就可以执行如下命令，来生成一个默认的 tailwindcss 样式文件。

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./src/tailwind.css

生成的效果如下，可以看到，未任何处理的情况下，整个 CSS 文件足足有 3.81 MB，不过不用担心，我们可以清除其中的样式。

如果你希望后续不输入这个命令，可以将其添加到你的项目的 package.json 中。

2. 移除默认的浏览器自动添加的 prefix

由于不同浏览器在不同的样式上可能有所不同，tailwindcss 会在生成的时候帮助我们生成一些特定的前缀。但小程序不涉及到浏览器的兼容性问题，所以我们可以关闭 taildwindcss 的 autoprefixer。

将刚刚的生成命令中加入 --no-autoprefixer 的参数，就可以生成不含 prefix 的 CSS 文件

npx tailwindcss-cli@latest build  --no-autoprefixer  ./src/tailwind.css -o ./src/tailwind.css

可以看到，去除 prefix 后，我们的文件缩小至 3.46MB。

3. 移除不用的样式

tailwindcss 提供了根据页面结构分析使用样式的功能，从而可以实现在构建生产版本之时，移除没有使用的样式，从而可以达到缩小样式的目的。

在项目中的配置 purge 属性，就可以实现 tailwindcss 自动分析 wxa 文件，从而移除没有用到的样式。

module.exports = {
    purge: ['./src/**/*.wxa'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
        screens: [],
    },
    variants: {
        extend: {},
    }
}

配置了 purge 属性后，可以看到，样式文件锐减到 9.93KB (因为我使用的样式很少）

4. 在 wxa.js 中引入

修改生成文件的命令，使生成的文件的后缀为 wxsss，从而可以继续使用微信小程序的 @import 语法。

npx tailwindcss-cli@latest build --no-autoprefixer  -o ./src/tailwind.wxss

重新生成样式文件后，只需要在 app.wxa 文件中的 style 块中加入如下引入代码，在项目中引入 tailwindcss。

因为 tailwindcss 只生成一个样式文件，因此，只需要在 app.wxa 中引入，即可确保所有页面都可以正常使用 tailwindcss

@import "./tailwind.wxss" 

优化

实际上，taildwindcss 的体积还可以进一步优化，你可以完全移除掉那些你没有用到的属性，从而让你的 css 文件特别小，从而控制小程序样式的大小。

小程序在开发过程中，如果可以在应用的某个地方加入版本号的显示，可以在后续 debug 的过程中，快速的定位代码的版本。但在过去的开发过程中，我大多是手动修改版本号，这在实际的使用过程中，经常会出现忘记修改版本号，或者代码中的版本号和实际在 git 中记录的版本号不同，给自己在后续排除错误的时候增加困难。

不过，如果你在使用 wxa.js 的话，可以借助于 wxa.js 的 replace 插件来简化这个过程，降低工作量。

实现思路

npm 项目在其 package.json 中是有一个 version 字段的，我们可以借助 npm 自带的 version 功能，来实现版本的自增，并自动打上 git 的 tag，简化开发工作。

具体实现

想要实现自动管理控制，你需要在你的 wxa 项目中安装其 replace 插件

npm i -S @wxa/plugin-replace

安装完成插件后，在wxa.config.js中引入 package.json，并添加一个replace 规则对象。

const ReplacePlugin = require('@wxa/plugin-replace');
const package = require("./package.json")
module.exports = {
    plugins: [
        // 一个规则对象，key 为目标字符串，value 为替换内容
        new ReplacePlugin({
          list: {
            'VERSION': package.version
          }
        })
    ]
}

添加完成配置后，你就可以在你的小程序中的任何需要展示项目版本号的位置，新增一个 VERSION 字符串。后续在小程序开发过程中，这个版本号就会被替换为 package.json 中的版本号。

在后续开发时，当你完成了一个版本的开发时，就可以使用 npm version 命令来发布新的版本。

npm version 命令常用的版本变更命令包括:

• npm version patch : 变更 patch 版本号，比如 1.0.0 变为 1.0.1
• npm version minor : 变更 minor 版本号，比如 1.0.0 变为 1.1.0
• npm version major : 变更 major 版本号，比如 1.0.0 变为 2.0.0
• 更多的命令可以访问 https://docs.npmjs.com/cli/v6/commands/npm-version 查看

执行了版本变更命令后，npm 会自动更新 package.json 中的版本号相关字段，并自动执行 commit & 执行 git tag 命令。

如果你需要自定义 git message ，可以在执行命令时，加入 -m 参数，npm 会自动把版本号传递给 %s 字符串从而实现自定义的版本变更，比如 npm version patch -m "Upgrade to %s for reasons"。

总结

wxa.js 提供的 replace 插件，可以帮助我们在开发过程中，通过简单的文本替换来实现一些简化工作流的功能， 如果你在使用 wxa.js 开发，不妨试试这个小技巧。