vue2配置scss的方法步驟
1、安裝文件
npm install --save-dev sass-loader npm install --save-dev node-sass
2、配置 webpack.base.conf.js
找到webpack.base.conf.js文件的module模塊下面的rules添加以下代碼
...
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
...
注意：這里loaders和文件中其他配置不同加了s
3、使用
1、在使用的地方如下寫法
<style lang="scss" scoped>
div {
a {
color: red
}
}
</style>
2、@import外部導(dǎo)入，如果不加scoped如果在app.vue中導(dǎo)入那么就是全局scss
<style lang="scss" scoped>
@import './assets/scss/global.scss';
* {
color: red
}
</style>
這樣寫下面的覆蓋外部引入的
注意遇到的坑
報(bào)錯
/node-sass/vendor no such file or directory in node-sass......
解決方法，運(yùn)行 rebuild解決了
npm/cnpm rebuild node-sass --save-dev
更詳細(xì)的解決方案如下：
根據(jù)package.json,進(jìn)行npm install node_modules, 運(yùn)行npm run dev時(shí)候,報(bào)錯,錯誤如下.
查看node_modules文件夾,發(fā)現(xiàn),并無vender 文件夾.如下圖:
解決辦法:
上圖node-sass文件夾下,新建 vender 文件夾.然后運(yùn)行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夾,如下圖所示:
就可以了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
創(chuàng)建Vue3項(xiàng)目有兩種常見的方式,一種是想vue2版本一樣使用腳手架工具創(chuàng)建,創(chuàng)建vue3項(xiàng)目的腳手架必須是4版本以上的,另一種方法就是使用vite創(chuàng)建,這篇文章主要給大家介紹了關(guān)于如何使用vite創(chuàng)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11
在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
vue項(xiàng)目配置element-ui容易遇到的坑及解決
這篇文章主要介紹了vue項(xiàng)目配置element-ui容易遇到的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
緩存清除成為克服瀏覽器緩存中過時(shí)內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時(shí)獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12
在Vue.js的應(yīng)用開發(fā)中,我們經(jīng)常會遇到需要動態(tài)修改DOM元素樣式的情況,Vue提供了多種方式來實(shí)現(xiàn)這一目標(biāo),其中ref是一個非常有用且靈活的工具,本文將深入探討如何在Vue項(xiàng)目中利用ref屬性來更改CSS樣式,并通過多個實(shí)例演示其具體用法,需要的朋友可以參考下2024-10-10
這篇文章主要為大家介紹了Vue的data為啥只能是函數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue實(shí)現(xiàn)在表格里,取每行的id的方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)在表格里,取每行的id的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案
這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案 ，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07