关于vue2+webpack4+unocss 踩坑记录

问题介绍

项目使用的是vue2+webpack4搭建的，在最近的开发中想要引入css原子化的能力，于是想到了其他项目中常用的unocss(其他项目都是vue3+vite)，然后就开始集成。

unocss的集成

1、安装依赖

npm install -D unocss
npm install -D @unocss/webpack

2、配置vue.config.js

// vue.config.js
const process = require('node:process') 
const UnoCSS = require('@unocss/webpack').default

module.exports = {
  configureWebpack: {
    plugins: [UnoCSS({})],
  },
  chainWebpack(config) {
    config.module.rule("vue").uses.delete("cache-loader");
    config.module.rule("tsx").uses.delete("cache-loader");
    config.merge({
      cache: false,
    });
  },
  css: {
    extract:
      process.env.NODE_ENV === "development"
        ? {
            filename: "[name].css",
            chunkFilename: "[name].[hash:9].css",
          }
        : true,
  },
};

3、uno.config.js

// uno.config.js
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
  presets: [presetUno()],
});

4、main.js

// 引入unocss
import "uno.css"

启动

本以为这样配置完后启动就🆗了，结果报错了。由于图片没有了，大概描述一下报错内容，提示components.at is undefined 大概就这个错，经过查看官方文档 发现有这么一句话

从 UnoCSS 版本 v0.59.0 开始，UnoCSS 已移至仅 ESM，你需要通过动态导入加载配置。

后面经过排查后发现，unocss的版本过高，vue.config.js 中只能使用动态引入的方式还加载这个插件,比如这样：

// vue.config.js
const process = require('node:process')

module.exports = function () {
  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
    configureWebpack: {
      plugins: [
        UnoCSS({})
      ]
    },
    chainWebpack(config) {
      config.module.rule('vue').uses.delete('cache-loader')
      config.module.rule('tsx').uses.delete('cache-loader')
      config.merge({
        cache: false
      })
    },
    css: {
      extract: process.env.NODE_ENV === 'development'
        ? {
            filename: '[name].css',
            chunkFilename: '[name].[hash:9].css'
          }
        : true
    }
  }))
}

发现还有一种低版本的写法，如下

// vue.config.js
const process = require('node:process')
const UnoCSS = require('@unocss/webpack').default

module.exports = {
  configureWebpack: {
    plugins: [
      UnoCSS({}),
    ]
  },
  chainWebpack(config) {
    config.module.rule('vue').uses.delete('cache-loader')
    config.module.rule('tsx').uses.delete('cache-loader')
    config.merge({
      cache: false,
    })
  },
  css: {
    extract: process.env.NODE_ENV === 'development'
      ? {
          filename: '[name].css',
          chunkFilename: '[name].[hash:9].css',
        }
      : true,
  },
}

说明：本项目使用的webpack4, 所以这里的配置都是按照webpack4来进行设置的

经过深思熟虑（懒）最终还是决定使用旧版，于是就把版本锁定在了 unocss@0.46.5 和 @unocss/webpack@0.46.5 再次启动项目，🆗了

总结：第一个坑就出现在版本过高，vue2这种框架比较老兼容不咋行。为啥是第一个坑？因为还有第二个😏

第二个坑

项目代码提交后，发现团队内的其他成员npm i 启动后样式不生效，最后发现是由于uno.config.js 写成了 uno.config.ts 大意了 😶😶😶

再次总结：细心很重要，有时候敲代码敲久了，细节问题一时半会儿还找不到，浪费时间。下班！