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"