vue3中vite使用sass的配置方法
vue3+vite使用scss
1、安裝依賴
npm install sass -d
2、配置vite.config.js
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "@/assets/styles/main.scss";'
}
}
},3、在對(duì)應(yīng)目錄下創(chuàng)建main.scss
$blue: #3385ff
4、在對(duì)應(yīng)文件引用變量，成功！
擴(kuò)展：
vue3+vite應(yīng)用中添加sass預(yù)處理器
一、如何安裝
進(jìn)入項(xiàng)目目錄直接npm安裝即可，不用繁瑣的各種配置
npm install --save-dev sass
如果安裝了，但是運(yùn)行vite啟動(dòng)項(xiàng)目依舊出現(xiàn)報(bào)錯(cuò)，請(qǐng)檢查package.json文件中，sass是不是在依賴配置中，把他移動(dòng)到開發(fā)依賴中即可，一般為安裝sass的時(shí)候npm沒有加–save-dev所導(dǎo)致的。
二、加入全局scss文件
打開vite的配置文件，在里面加入css的配置即可
cssPreprocessOptions: {
scss: {
additionalData: '@import "./src//scss/common.scss";' // 全局公共樣式
}
}三、關(guān)于sass的“…Using / for division…”報(bào)錯(cuò)
這是由于sass版本導(dǎo)致的問題，不影響項(xiàng)目編譯，解決方法：
1.將“/”的位置改為match.dev(arg1,arg2)
@use "sass:math"; /* 頭部不要忘記加入這個(gè)，不然會(huì)報(bào)錯(cuò)找不到math */ /* 將這個(gè) */ @return ($px/$rem)+rem; /* 改為下邊這個(gè) */ @return match.div($px,$rem)+rem;
2.使用官方sass-migrator工具
$ npm install -g sass-migrator $ sass-migrator division **/*.scss
官方對(duì)這個(gè)問題的更多信息請(qǐng)查看：Sass: Breaking Change: Slash as Division (sass-lang.com)
到此這篇關(guān)于vue3中vite使用sass的文章就介紹到這了,更多相關(guān)vue3使用sass內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用element-ui按需引入時(shí)踩過的那些坑
Element-UI是基于vue實(shí)現(xiàn)的一套不依賴業(yè)務(wù)的UI組件庫,提供了豐富的PC端組件,減少用戶對(duì)常用組件的封裝,降低了開發(fā)的難易程度,下面這篇文章主要給大家介紹了關(guān)于vue使用element-ui按需引入時(shí)踩過的那些坑,需要的朋友可以參考下2022-05-05
vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法
這篇文章主要介紹了vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
在 Vue2 項(xiàng)目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch，為大家詳細(xì)講解計(jì)算屬性computed與$watch，感興趣的小伙伴們可以參考一下2016-09-09
解決在vue的mounted中獲取對(duì)象為null問題
這篇文章主要介紹了解決在vue的mounted中獲取對(duì)象為null問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue技術(shù)實(shí)現(xiàn)遞歸組件的方法
這篇文章主要為大家詳細(xì)介紹了基于Vue技術(shù)實(shí)現(xiàn)遞歸組件的方法 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實(shí)現(xiàn)柱形圖從右向左滾動(dòng)的效果，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡(jiǎn)單使用,需要的朋友可以參考下2018-02-02
這篇文章主要以vue3+vite+ts舉例,為大家詳細(xì)介紹了vue3中pinia的安裝與使用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09