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