使用Vite處理css?less及postcss示例詳解
1. css
當(dāng)前，我們的 vite的基本使用 項(xiàng)目中是沒有 css 代碼的，但在真實(shí)的項(xiàng)目中，肯定會(huì)有 css 代碼，那 Vite 能否幫助我們對(duì) css 做支持呢？我們可以測試一下，在 src 目錄下新建 css 文件夾，在 css 文件夾中新建 style.css 文件，內(nèi)容如下：
body {
background-color: #f66;
}
有了這個(gè) css 文件后，先來思考一下，這個(gè) css 文件現(xiàn)在有被打包嗎？很明顯，沒有。因?yàn)樗鼪]有在項(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ì)打印一行信息，提示我們頁面已經(jīng)重新加載了。這時(shí)再來看瀏覽器頁面：
可以看到，頁面背景顏色已經(jīng)成功變成了我們設(shè)置的顏色?？梢姡?code>css 代碼已經(jīng)生效了，所以，Vite 默認(rèn)就支持對(duì) 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 文件：
保存修改后，你會(huì)發(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 命令啟動(dòng)項(xiàng)目：
這時(shí)就沒有問題了，再來看瀏覽器中的效果：
可以看到，Hello Vite 的字體大小和顏色都已經(jīng)成功渲染出來了，Vite 已經(jīng)將 less 代碼編譯成了 css 代碼。
3. postcss
前面講 Webpack 時(shí)我們還講了 postcss，我們知道 postcss 可以對(duì)某些 css 屬性（比如 user-select）自動(dòng)添加瀏覽器前綴。那么 Vite 會(huì)自動(dòng)幫我們添加瀏覽器前綴嗎？我們來測試一下，在 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)情況下是不會(huì)幫我們給 css 屬性添加瀏覽器前綴的。那如果我們想讓它幫我們自動(dòng)添加該怎么做呢？那么，我們可以先來安裝一下 postcss 工具：
npm install postcss -D
安裝完 postcss 后，再來執(zhí)行 npx vite 把項(xiàng)目跑起來，再來看效果：
還是沒有效果，這是為什么？因?yàn)槲覀冋f過，postcss 是需要依賴對(duì)應(yīng)的插件來幫助我們實(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 這邊不行，如果不通過 require() 導(dǎo)入插件，而是直接傳字符串：
module.exports = {
plugins: [
'postcss-preset-env'
]
}
啟動(dòng)項(xiàng)目會(huì)報(bào)錯(cuò)：
然后再來執(zhí)行 npx vite 命令啟動(dòng)項(xiàng)目，瀏覽器中查看效果：
可以看到，這次就有加上瀏覽器前綴了。
4. 小結(jié)
你會(huì)發(fā)現(xiàn)，對(duì)于 css 相關(guān)的處理（不管是 css 還是 less 還是 postcss），我們沒有編寫任何關(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學(xué)習(xí)筆記之slot插槽用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽用法,結(jié)合實(shí)例形式對(duì)比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑
今天小編就為大家分享一篇淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue3+TypeScript報(bào)錯(cuò):無法找到模塊xx的聲明文件問題
這篇文章主要介紹了Vue3+TypeScript報(bào)錯(cuò):無法找到模塊xx的聲明文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽滑動(dòng)分割面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中的router-view組件的使用教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vueCl如何 查看打包后文件的大小占比問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06