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