Vite之对CSS的处理方式及使用

小袁搬码2024-02-19 9:16

Vite之对CSS的处理方式及使用

文章目录

Vite之对CSS的处理方式及使用
- [1. 直接对CSS处理](#1. 直接对CSS处理)
- [2. 使用css预处理器less](#2. 使用css预处理器less)

1. 直接对CSS处理

可直接导入css进行使用，而不需要任何配置

定义样式文件：myStyle.css

css 复制代码

body {
    background-clor:red
}

导入css文件

js 复制代码

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

css 复制代码

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

安装less编译器

shell 复制代码

npm install less -D

vite直接支持postcss的转换

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

shell 复制代码

npm install postcss postcss-preset-env -D

postcss.config.js如下

js 复制代码

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

在组件中使用

js 复制代码

import "./css/myStyle.less"