Whidy Writes

VueCLI 4.x下正确使用TailwindCSS和PurgeCSS示范

发布于:(更新于:

2020 年 12 月 23 日补充

今天有个同事参考我的配置搭一个项目,除了没有用到 TailwindCSS,其它一样,却没办法成功运行,错误提示“ Error: PostCSS plugin postcss-purgecss requires PostCSS 8. ”,不明白怎么回事。然后经过排查,发现,之前我搭建项目的时候还是 @fullhuman/postcss-purgecss 3.0.0 ,安装完成后会自动带上 PostCSS 的依赖,而同事装完默认最新 3.1.3 版,却没有 PostCSS 的依赖,导致错误发生,这个现象很奇怪,网上没找到解决方案,理论上即便如此,手动安装 PostCSS 8 应该也是可以的。却不行,如果你也遇到这个问题,不妨安装指定版本也就是 3.0.0 版本就好了。


之前做过 VueCLI 3.x 下的一个配置,后来发现出问题了,于是这几天看了一下相关文档,升级了一下最新的搭配,目前来看还是挺完美的,对于追求项目体积的朋友,可以尝试一下。

核心内容介绍

本文对应的内容可以在我的 github 个人项目my-cli中找到。

首先重头戏是PurgeCSS,这是一个不错的**移除无用 CSS 样式(Remove unused CSS)**的插件,起初是在学习 TailwindCSS 过程中看到的,虽然他的设计会有一丁点不完美(通过正则匹配 class 来进行检查,在某些复杂的语法下可能出现不可预料的未知错误),不过大部分场景表现良好,所以还是可以放心使用的。

其次是TailwindCSS,我的博客就是用的这个 CSS 框架,上手理解还是不难的,也推荐使用。

最后是PostCSS了,想必大家都不陌生,实际上在 VueCLI 4.x 内部已经集成,更多关于 PostCSS 的教程也可以参考我 2017 年写的一系列教程PostCSS 自学笔记(一)【安装使用篇】,随着时间推移,毕竟过去三年了,可能有些内容会有变化,不过很多内容还是值得了解的。

操作环境

  • macOS 版本:10.15.7
  • Node.js 版本:v14.15.0
  • VueCLI 版本:@vue/cli 4.5.6
  • TailwindCSS 版本:1.9.6

特别注意,11 月 19 日发布了 TailwindCSS 2.x ,官方已经要求需要 PostCSS 8 支持,虽然我尝试了直接升级暂时没发现问题,不过还需要保持关注。

搭建项目

我印象中,从 VueCLI 3.x 开始就多了一个 vue ui 命令来查看管理 vue 项目,你可以通过 vue create my-project 创建一个项目,并进行初始化的相关配置选择,也可以通过 vue ui 的新建项目来创建,这都不重要,重要的是建好项目后,如何正确安装 tailwindCSSpurgeCSS 这两个“模块”。

通过可视化操作安装

在 vue 项目管理界面中选中项目,左侧菜单点击插件,右侧右上角添加插件,输入 purgecss 可以看到下图

@fullhuman/vue-cli-plugin-purgecss插件安装

选中其中的 @fullhuman/vue-cli-plugin-purgecss 并点击底部安装,进行安装,装好后,再次点击完成安装,完成全部安装过程(会提示正在调用 @fullhuman/vue-cli-plugin-purgecss...)。

这时候观察依赖文件 package.json 会发现devDependencies中多了两个:

"devDependencies": { "@fullhuman/postcss-purgecss": "^3.0.0", "@fullhuman/vue-cli-plugin-purgecss": "^3.0.1", ... }

**特别注意,这个是没有问题的!**也就是说,你要么严格按照 PurgeCSS 官方文档中 Vue 安装向导里的方式来,如果手动 npm i 的话,则需要执行:

npm i -D @fullhuman/postcss-purgecss @fullhuman/vue-cli-plugin-purgecss

千万不能手动安装的时候少装一个,关于这个问题,官方 github 的 issues 也有很多提问者。

安装完插件,另一个就是 tailwindcss 库了,这个简单,你同样可以在界面上的依赖菜单执行安装,不过这个问题不大,通过命令安装 npm i tailwindcss 就好了。

如果要通过界面安装,注意装完后选择自动生成的配置文件,可以选择 minimal

接下来创建一个基础的 tailwindcss 配置文件 tailwind.config.js ,可以通过命令 npx tailwindcss init 创建,也可以手动创建,更多可以参考Create your Tailwind config file (optional),文件内容大致如下:

// tailwind.config.js module.exports = { future: {}, purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }

最后,进行关键的配置工作,这里直接修改 vue.config.js 文件即可,修改的内容大致如下:

const purgecss = require('@fullhuman/postcss-purgecss')({ content: [ './public/**/*.html', './src/**/*.vue' ], defaultExtractor(content) { const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, ''); return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []; }, safelist: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/] }); module.exports = { // ...your other config css: { postcss: { plugins: [ // eslint-disable-next-line global-require require('tailwindcss')('./tailwind.config.js'), ...process.env.NODE_ENV === 'production' ? [purgecss] : [] ] } } }, // ...your other config

到此大功告成。运行项目进行测试看看有无问题,懒得自己弄的,也可以直接 Clone 我的 github 个人项目my-cli进行尝试。

简单说明一下,上面的配置中, PurgeCSS 仅在生产环境下才会生效。直接运行 npm run build ,可以看到 output 日志中的 css 非常小,你完全可以在 vue 文件写一些组件中没有用到的样式,看看 dist 目录中的 css 是否有生成出来。

另一个安装方案

这个就相对傻瓜一些,是第三方封装的插件,也是刚才上面图中第一个插件 vue-cli-plugin-tailwind ,这个并不是最优推荐,因为二次封装的东西,总有可能出现更多的问题,不过目前来看,会方便很多。

同样的操作,在刚才可视化界面上安装这个插件,安装vue-cli-plugin-tailwind 说明,然后再在项目下创建一个 postcss.config.js (当然 VueCLI 会自动读取配置),然后修改文件内容如下:

module.exports = { plugins: { tailwindcss: {}, 'vue-cli-plugin-tailwind/purgecss': { content: ['./public/**/*.html', './src/**/*.vue'], defaultExtractor: content => content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [], }, autoprefixer: {}, }, }

基本上就 OK 了,更多内容见文档。

总结

VueCLI 内部集成了很多功能,了解并掌握 vue.config.js 的配置非常重要, TailwindCSS 作为一个后起的 CSS 库,也是值得学习的,那 PurgeCSS 对于追求极致的帮助很大,整体搞下来,相信你的项目会更加优秀~

avatar

Whidy

一名爱折腾的前端开发工程师,喜欢打篮球和分享 ฅʕ•̫͡•ʔฅ