vue.js 前端 javascript vue2+vue-cli使用unocss

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 的行为，例如定义主题样式、配置插件、启用或禁用特定功能等。

在 Vue CLI 项目中，默认情况下，你应该在根目录创建一个 unocss.config.js 文件来配置 UnoCSS。这个文件会被 @unocss/webpack 插件自动识别并加载。具体配置请查阅官网文档。

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.运行项目 测试是否生效

npm run serve

推荐文章

 您阅读本篇文章共花了：