Whidy Writes

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

创建于:最后更新:Whidy

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

一名爱折腾的前端开发工程师,喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ