一、在vite項目中使用css預處理器
vite已經(jīng)將這些預處理器的loader內置了，我們不用再像在webpack項目中那樣，需要下載和配置一堆相關的loader，我們只需要下載less，sass依賴，就能直接在項目中使用啦
使用npm或者yarn來安裝以下依賴：
- Less預處理器：
npm install -D less - Sass預處理器：
npm install -D sass
如圖，下載之后我們在項目中style添加lang屬性為less，就可以是用less語法啦
運行效果如圖：
還有一種引入方式，import導入外部文件
-
app.less
如圖，我們新建一個style文件夾，里面新建一個app.less文件，然后再App.vue中使用import導入即可
二、配置路徑別名
在前端項目中，有許多文件需要引用，例如各種組件、模塊、圖片等等。這些文件的路徑可以是相對路徑或絕對路徑，但在復雜的項目中，這些路徑非常容易混淆和出錯。使用路徑別名可以方便地進行路徑管理，讓文件路徑更加清晰和易于維護。
路徑別名存儲在項目的配置文件中，通常為webpack.config.js或者vue.config.js，可以通過設置“alias”字段來定義別名。
我們使用的vite創(chuàng)建的項目，所以我們去vite.config.js中配置resolve的alias即可
- vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: { // 配置別名
alias: {
"@": "/src" // @表示src目錄
}
}
})
通過設置路徑別名，可以使代碼更簡潔而富有可讀性，我們可以輕松地引用某個組件或者圖片，而不需要在每個頁面中重復寫入完整的路徑。文章來源：http://www.zghlxwxcb.cn/news/detail-501668.html
這樣配置了以后，我們還是以上面的app.less為例，我們可以這樣引入
可以看到，效果還是一樣的，說明我們配置的路徑別名成功生效了。文章來源地址http://www.zghlxwxcb.cn/news/detail-501668.html
到了這里，關于在vite+vue3項目中配置使用css預處理器（less/sass）以及路徑別名的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
