Vite之对CSS的处理方式及使用
Vite之对CSS的处理方式及使用
1. 直接对CSS处理
可直接导入css进行使用，而不需要任何配置
定义样式文件：myStyle.css
body {
background-clor:red
}
导入css文件
import "./css/myStyle.css"
2. 使用css预处理器less
科普：
PostCSS:是一个用 JavaScript 工具和插件转换 CSS 代码的工具
PostCSS官网： https://www.postcss.com.cn/
PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。
- 定义less样式，如：myStyle.less
@fontSize:100px;
@fontColor:blue;
.title{
font-size:@fontSize;
color:@fontColor;
user-select:none;
}
- 安装less编译器
npm install less -D
- vite直接支持postcss的转换
需要先安装postcss,并且配置postcss.config.js的配置文件即可
npm install postcss postcss-preset-env -D
- postcss.config.js如下
module.exports={
plugins:[
require('postcss-preset-env')
]
}
- 在组件中使用
import "./css/myStyle.less"
原文地址：https://blog.csdn.net/yuanjinshenglife/article/details/136149889
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！