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 实现。

1. 定义less样式，如：myStyle.less

@fontSize:100px;
@fontColor:blue;
.title{
    font-size:@fontSize;
    color:@fontColor;
    
    user-select:none;
}

2. 安装less编译器

npm install less -D

3. vite直接支持postcss的转换

需要先安装postcss,并且配置postcss.config.js的配置文件即可

npm install postcss postcss-preset-env -D

4. postcss.config.js如下

module.exports={
    plugins:[
        require('postcss-preset-env')
    ]
}

5. 在组件中使用

import "./css/myStyle.less"