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項目安裝scss常見報錯處理方式
在Vue項目安裝SCSS的時候，常見報錯有以下幾種情況：
- sass/scss變量不識別
- 出現(xiàn)“node-gyp rebuild”錯誤
- 安裝node-sass失敗
下面我們分別講解這三種常見的錯誤及其解決方式：
1. sass/scss變量不識別
如果我們在Vue項目中安裝SCSS時，發(fā)現(xiàn)無法引用變量，可能是以下幾種情況：
1）沒有正確定義變量：
正確的變量的寫法如下：
//定義變量
$primary-color: #f00;
//使用變量
.foo {
color: $primary-color;
}2）沒有用@import導(dǎo)入對應(yīng)的SCSS文件：
需要在需要使用的SCSS文件的開頭導(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”錯誤
此報錯主要處理node-sass時發(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時，可能會出現(xiàn)各種安裝失敗的提示。此時，我們可以考慮使用cnpm代替npm進行安裝，或者使用以下命令：
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
總結(jié)
到此這篇關(guān)于Vue3中引入scss文件的方法步驟的文章就介紹到這了,更多相關(guān)Vue3引入scss內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Nvue是一個基于weex改進的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下2023-12-12
vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue日期組件,支持vue1.0和2.0，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
vue作用域插槽詳解、slot、v-slot、slot-scope
這篇文章主要介紹了vue作用域插槽詳解、slot、v-slot、slot-scope，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue踩坑記之npm?install報錯問題解決總結(jié)
當(dāng)你跑起一個項目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報錯問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
公眾中經(jīng)常會有這種場景,一些合同、協(xié)議等的頁面需要進行下載,而且需要和頁面保持一致,下面這篇文章主要給大家介紹了關(guān)于Vue頁面生成PDF的最佳方法,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關(guān)知識,我們先來從Vue提供的Vue.set()和this.$set()這兩個api看看它內(nèi)部是怎么實現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn)
這篇文章主要介紹了element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式
這篇文章主要介紹了Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
在現(xiàn)代Web開發(fā)中,瀏覽器兼容性是一個重要的問題,盡管大多數(shù)用戶已經(jīng)轉(zhuǎn)向了現(xiàn)代瀏覽器,但仍有一部分用戶可能仍在使用老舊的瀏覽器版本,本文將詳細介紹如何在Vue項目中實現(xiàn)低版本瀏覽器升級提示,并通過多個代碼示例來展示不同的應(yīng)用場景和技術(shù)點,需要的朋友可以參考下2024-10-10