1.安装依赖
执行命令：
npm install @unocss/webpack --save-dev
npm install unocss --save-dev
我的安装的版本是：
"devDependencies": {
"unocss": "^0.46.5",
"@unocss/webpack": "^0.46.5"
}
2.配置vue.config.js
const unocss = require('@unocss/webpack').default
module.exports ={
configureWebpack: {
plugins: [
new unocss()
],
css: {
extract: {
filename: '[name].[hash:9].css',
}
}
}
}
3.根目录增加unocss.config.js
在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件，你可以定制化 UnoCSS 的行为，例如定义主题样式、配置插件、启用或禁用特定功能等。文章来源：https://www.toymoban.com/news/detail-530185.html
在 Vue CLI 项目中，默认情况下，你应该在根目录创建一个 unocss.config.js 文件来配置 UnoCSS。这个文件会被 @unocss/webpack 插件自动识别并加载。具体配置请查阅官网文档。文章来源地址https://www.toymoban.com/news/detail-530185.html
import {
defineConfig,
presetAttributify,
presetUno,
transformerDirectives,
} from 'unocss'
export default defineConfig({
rules: [
[/^line-height-(.+)$/, ([, d]) => ({ 'line-height': `${+d / 4}rem` })],
],
shortcuts: [
],
presets: [
presetUno(),
presetAttributify(),
],
transformers: [
transformerDirectives(),
// transformerVariantGroup(),
],
})
4.main.js里引入样式
import 'uno.css'
5.运行项目 测试是否生效
<div class="text-red">test日落</div>
npm run serve
到了这里，关于vue2+vue-cli使用unocss的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![在vite或者vue-cli中使用.env[mode]环境变量](https://imgs.yssmx.com/Uploads/2024/02/459254-1.png)
