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