Whidy Writes

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

创建于:最后更新:whidy

之前做过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

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