css框架,推荐的有UnoCSS,Tailwind CSS。
是vite构建的话,用UnoCss比较方便,啥也不用改,支持的比较好。
UnoCSS: The instant on-demand Atomic CSS engine
用vuecli构建的话,也可以用;要改配置之类的,具体分了webpack4和webpack5。
UnoCSS Webpack Plugin
因为项目是webpack4,然后准备选择Tailwind CSS;一顿百度发现了一个windicss,因为配置极其简单,直接选择了这个windicss。
对老项目来说,感觉有一些默认的className,可以提升效率就可以了;对框架里一些新的方法需求没有很高。
开始 | Windi CSS
1.npm安装
npm i -g windicss
2.然后在项目main.js里引入css
import 'windi.css'
3.然后直接创建windi.config.js文件,在这个文件里配置相关设置。
这个文件是自动识别的,不需要引用调用啥的;会自动在项目根目录里找。
配置 Windi CSS | Windi CSS
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
/* 配置项... */
})
这里写两个配置,对接入老项目非常有用。
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
preflight: false, // windi.css会给比如img标签直接加样式,设为false取消,以免影响之前的样式
prefix: "xhy-", // 给windi.css中的默认类名增加一个前缀,避免类名冲突
})
结束,现在就可以用了。
ps:如果是新项目,没有冲突问题,建议选择UnoCSS 或 Tailwind CSS