1.安裝依賴
執(zhí)行命令：
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 的行為，例如定義主題樣式、配置插件、啟用或禁用特定功能等。文章來源：http://www.zghlxwxcb.cn/news/detail-530185.html
在 Vue CLI 項目中，默認情況下，你應該在根目錄創(chuàng)建一個 unocss.config.js 文件來配置 UnoCSS。這個文件會被 @unocss/webpack 插件自動識別并加載。具體配置請查閱官網文檔。文章來源地址http://www.zghlxwxcb.cn/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模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![在vite或者vue-cli中使用.env[mode]環(huán)境變量](https://imgs.yssmx.com/Uploads/2024/02/459254-1.png)
