Vue3中引入scss文件的方法步驟
1、 npm下載scss包
npm install sass sass-loader -d
2、創(chuàng)建全局的scss文件添加全局樣式
3、Vite 添加css配置
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/style/mixin.scss";` // 此處全局的scss文件
}
}
}
})4、使用配置好的 scss 可以使用定義好的scss樣式
附：vue項(xiàng)目安裝scss常見(jiàn)報(bào)錯(cuò)處理方式
在Vue項(xiàng)目安裝SCSS的時(shí)候，常見(jiàn)報(bào)錯(cuò)有以下幾種情況：
- sass/scss變量不識(shí)別
- 出現(xiàn)“node-gyp rebuild”錯(cuò)誤
- 安裝node-sass失敗
下面我們分別講解這三種常見(jiàn)的錯(cuò)誤及其解決方式：
1. sass/scss變量不識(shí)別
如果我們?cè)赩ue項(xiàng)目中安裝SCSS時(shí)，發(fā)現(xiàn)無(wú)法引用變量，可能是以下幾種情況：
1）沒(méi)有正確定義變量：
正確的變量的寫法如下：
//定義變量
$primary-color: #f00;
//使用變量
.foo {
color: $primary-color;
}2）沒(méi)有用@import導(dǎo)入對(duì)應(yīng)的SCSS文件：
需要在需要使用的SCSS文件的開(kāi)頭導(dǎo)入已經(jīng)定義的變量的SCSS文件。
示例：
定義文件：var.scss
$primary-color: #f00;
使用變量的文件：style.scss
@import 'path/to/var.scss'; // 導(dǎo)入定義變量的 SCSS 文件
.foo {
color: $primary-color;
}2. 出現(xiàn)“node-gyp rebuild”錯(cuò)誤
此報(bào)錯(cuò)主要處理node-sass時(shí)發(fā)生，解決方法如下：
1）檢查node-gyp是否正常安裝。
可以在終端或命令行輸入以下命令檢查：
node_modules/.bin/.my-bin-node-gyp -v
2）使用cnpm安裝。
安裝cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安裝node-sass：
cnpm install node-sass
3. 安裝node-sass失敗
當(dāng)我們執(zhí)行npm install node-sass時(shí)，可能會(huì)出現(xiàn)各種安裝失敗的提示。此時(shí)，我們可以考慮使用cnpm代替npm進(jìn)行安裝，或者使用以下命令：
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
總結(jié)
到此這篇關(guān)于Vue3中引入scss文件的方法步驟的文章就介紹到這了,更多相關(guān)Vue3引入scss內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)
這篇文章主要為大家詳細(xì)介紹了Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開(kāi)發(fā)中，我們可以用?“拿來(lái)主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁(yè)面布局，避免書(shū)寫大量的HTML和CSS代碼，省下了許多不必要的時(shí)間，可以直接搭配vue使用2022-11-11
vue3使用別名報(bào)錯(cuò)問(wèn)題的解決辦法(vetur插件報(bào)錯(cuò)問(wèn)題)
最近在寫一個(gè)購(gòu)物網(wǎng)站使用vue,使用中遇到了問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue3使用別名報(bào)錯(cuò)問(wèn)題的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js中該如何自己維護(hù)路由跳轉(zhuǎn)記錄
這篇文章主要給大家介紹了關(guān)于Vue.js中該如何自己維護(hù)路由跳轉(zhuǎn)記錄的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vuecli4插件svg-sprite-loader使用svg圖標(biāo)
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了axios攔截器工作原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
圖表在我們的項(xiàng)目中可以幫我們很明確的看到我們想要看到的數(shù)據(jù)，本文將主要介紹Echart圖表在項(xiàng)目中前后端使用的詳細(xì)教程，感興趣的同學(xué)可以學(xué)習(xí)一下2021-11-11
這篇文章主要介紹了如何使用 Vue.js 和純 JavaScript 構(gòu)建 Bootstrap 組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11