美文网首页
css框架 windicss

css框架 windicss

作者: 思不凡语不浮 | 来源:发表于2023-09-24 16:32 被阅读0次

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

相关文章

网友评论

      本文标题:css框架 windicss

      本文链接:https://www.haomeiwen.com/subject/eenfbdtx.html