使用Vite處理css?less及postcss示例詳解
1. css
當(dāng)前，我們的 vite的基本使用 項(xiàng)目中是沒(méi)有 css 代碼的，但在真實(shí)的項(xiàng)目中，肯定會(huì)有 css 代碼，那 Vite 能否幫助我們對(duì) css 做支持呢？我們可以測(cè)試一下，在 src 目錄下新建 css 文件夾，在 css 文件夾中新建 style.css 文件，內(nèi)容如下：
body {
background-color: #f66;
}
有了這個(gè) css 文件后，先來(lái)思考一下，這個(gè) css 文件現(xiàn)在有被打包嗎？很明顯，沒(méi)有。因?yàn)樗鼪](méi)有在項(xiàng)目的依賴中，所以不會(huì)被打包。那么項(xiàng)目的依賴在哪里呢？項(xiàng)目依賴的入口在入口文件 index.html 中：
<script src="./src/main.js" type="module"></script>
那么我們可以在 src/main.js 文件中導(dǎo)入這個(gè) style.css 文件，將其加入項(xiàng)目的依賴文件中：
保存更改后，你會(huì)發(fā)現(xiàn)終端中會(huì)打印一行信息，提示我們頁(yè)面已經(jīng)重新加載了。這時(shí)再來(lái)看瀏覽器頁(yè)面：
可以看到，頁(yè)面背景顏色已經(jīng)成功變成了我們?cè)O(shè)置的顏色?？梢?jiàn)，css 代碼已經(jīng)生效了，所以，Vite 默認(rèn)就支持對(duì) css 代碼的處理（而不需要再像使用 Webpack 時(shí)，還需要使用 css-loader 和 style-loader）。它也是通過(guò)在 <head> 元素中插入包含了有關(guān)樣式代碼的 <style> 元素實(shí)現(xiàn)的：
2. less
那如果項(xiàng)目中還有 less 代碼呢？比如，我們先在 src/main.js 文件中添加幾行代碼，創(chuàng)建應(yīng)用了 title 類的 <div> 元素，并添加一些文本，之后添加進(jìn) <body> 元素中：
...
const titleEl = document.createElement('div')
titleEl.className = 'title'
titleEl.innerText = "Hello Vite"
document.body.appendChild(titleEl)
然后在 css 文件夾中新建 title.less 文件，內(nèi)容如下（給 title 類設(shè)置一些樣式）：
@fontSize: 30px;
@fontColor: yellow;
.title {
font-size: @fontSize;
color: @fontColor;
}
接著，在 src/main.js 文件中引入這個(gè) title.less 文件：
保存修改后，你會(huì)發(fā)現(xiàn)終端中報(bào)錯(cuò)了：
大意是當(dāng)前的預(yù)處理器需要依賴 less 這個(gè)工具，但 Vite 沒(méi)有找到它。確實(shí)，我們還沒(méi)有安裝它，所以我們需要先安裝 less 這個(gè)工具（前面在講 Webpack 時(shí)說(shuō)過(guò)，在使用 less-loader 去加載 less 文件時(shí)，也需要依賴 less 這個(gè)工具，所以必須先安裝 less。只不過(guò)在 Vite 中，我們不再需要使用 less-loader 了，但 less 工具還得用）：
npm install less -D
安裝完 less，再執(zhí)行 npx vite 命令啟動(dòng)項(xiàng)目：
這時(shí)就沒(méi)有問(wèn)題了，再來(lái)看瀏覽器中的效果：
可以看到，Hello Vite 的字體大小和顏色都已經(jīng)成功渲染出來(lái)了，Vite 已經(jīng)將 less 代碼編譯成了 css 代碼。
3. postcss
前面講 Webpack 時(shí)我們還講了 postcss，我們知道 postcss 可以對(duì)某些 css 屬性（比如 user-select）自動(dòng)添加瀏覽器前綴。那么 Vite 會(huì)自動(dòng)幫我們添加瀏覽器前綴嗎？我們來(lái)測(cè)試一下，在 src/css/title.less 文件中添加 user-select: none; 這行代碼：
@fontSize: 30px;
@fontColor: yellow;
.title {
font-size: @fontSize;
color: @fontColor;
user-select: none; // 添加 user-select 屬性，測(cè)試瀏覽器前綴是否有添加
}
然后我們看下瀏覽器中的效果：
可見(jiàn)，Vite 默認(rèn)情況下是不會(huì)幫我們給 css 屬性添加瀏覽器前綴的。那如果我們想讓它幫我們自動(dòng)添加該怎么做呢？那么，我們可以先來(lái)安裝一下 postcss 工具：
npm install postcss -D
安裝完 postcss 后，再來(lái)執(zhí)行 npx vite 把項(xiàng)目跑起來(lái)，再來(lái)看效果：
還是沒(méi)有效果，這是為什么？因?yàn)槲覀冋f(shuō)過(guò)，postcss 是需要依賴對(duì)應(yīng)的插件來(lái)幫助我們實(shí)現(xiàn)對(duì)應(yīng)的功能的，所以，我們這里可以安裝一下 postcss-preset-env 插件（或者 autoprefixer 插件，但現(xiàn)在 postcss-preset-env 用得更多）：
npm install postcss-preset-env -D
安裝好之后，還需要配置 postcss，我們可以在項(xiàng)目目錄下新建 postcss.config.js 文件，內(nèi)容如下：
module.exports = {
plugins: [
require('postcss-preset-env')
]
}
注意：在使用 Webpack 時(shí) postcss 配置插件這邊可以直接傳入字符串，但 Vite 這邊不行，如果不通過(guò) require() 導(dǎo)入插件，而是直接傳字符串：
module.exports = {
plugins: [
'postcss-preset-env'
]
}
啟動(dòng)項(xiàng)目會(huì)報(bào)錯(cuò)：
然后再來(lái)執(zhí)行 npx vite 命令啟動(dòng)項(xiàng)目，瀏覽器中查看效果：
可以看到，這次就有加上瀏覽器前綴了。
4. 小結(jié)
你會(huì)發(fā)現(xiàn)，對(duì)于 css 相關(guān)的處理（不管是 css 還是 less 還是 postcss），我們沒(méi)有編寫(xiě)任何關(guān)于 Vite 的配置，因?yàn)?Vite 已經(jīng)幫我們將這些配置都內(nèi)置了。而且你會(huì)發(fā)現(xiàn)，Vite 的執(zhí)行效率是比 Webpack 高很多的。
Vite 可以直接支持對(duì) css 的處理；
直接導(dǎo)入 css 即可；
Vite 可以直接支持 css 預(yù)處理器，比如 less；
直接導(dǎo)入 less；
之后安裝 less 編譯器：
npm install less -D
Vite 直接支持 postcss 的轉(zhuǎn)換；
只需要安裝 postcss，并且配置 postcss.config.js 配置文件即可：
npm install postcss postcss-preset-env -D
module.exports = {
plugins: [
require('postcss-preset-env')
]
}以上就是使用Vite處理css less及postcss示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vite處理css less postcss的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue狀態(tài)機(jī)的開(kāi)啟與停止操作詳細(xì)講解
Vuex是專門(mén)為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue_drf實(shí)現(xiàn)短信驗(yàn)證碼
我們?cè)谧鼍W(wǎng)站開(kāi)發(fā)時(shí)，登錄頁(yè)面很多情況下是可以用手機(jī)號(hào)接收短信驗(yàn)證碼，本文主要介紹了vue_drf實(shí)現(xiàn)短信驗(yàn)證碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
vue/cli?配置動(dòng)態(tài)代理無(wú)需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板，分為vue?init?webpack-simple?項(xiàng)目名和vue?init?webpack?項(xiàng)目名兩種，這篇文章主要介紹了vue/cli?配置動(dòng)態(tài)代理，無(wú)需重啟服務(wù),需要的朋友可以參考下2022-05-05
詳解vue組件化開(kāi)發(fā)-vuex狀態(tài)管理庫(kù)
本篇文章主要介紹了詳解vue組件化開(kāi)發(fā)-vuex狀態(tài)管理庫(kù)，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果的相關(guān)資料,vue的過(guò)渡動(dòng)畫(huà)主要是transition標(biāo)簽的使用,配合css動(dòng)畫(huà)實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue filter 完美時(shí)間日期格式的方法，文中給大家提到了vue filter方法-時(shí)間格式化 的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法
本文主要介紹了vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程
最近開(kāi)始入坑前端mapbox地圖,跟大家一起慢慢深入學(xué)習(xí),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用mapbox地圖切換底圖的詳細(xì)教程,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-04-04
部署Vue項(xiàng)目到服務(wù)器后404錯(cuò)誤的原因及解決方案
文章介紹了Vue項(xiàng)目部署步驟以及404錯(cuò)誤的解決方案,部署步驟包括構(gòu)建項(xiàng)目、上傳文件、配置Web服務(wù)器、重啟Nginx和訪問(wèn)域名,404錯(cuò)誤通常是由于歷史模式問(wèn)題導(dǎo)致的,解決方法是修改Nginx配置,將所有頁(yè)面請(qǐng)求重定向到index.html,并在Vue應(yīng)用中覆蓋所有路由情況2025-02-02
這篇文章主要介紹了vue項(xiàng)目 git提交及服務(wù)器部署方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07