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