vue項目中設置全局引入scss,使每個組件都可以使用變量


在Vue項目中使用scss,如果寫了一套完整的有變量的scss文件。那么就需要全局引入,這樣在每個組件中使用。

可以在mian.js全局引入,下面是使用方法。

1: 安裝node-sass、sass-loader、style-loader

    npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev 

2: 安裝sass-resources-loader  (如果不安裝的話變量會報錯)

    npm install sass-resources-loader --save-dev

3: 修改build中的utils.js

    scss: generateLoaders('sass'),  修改成: scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/main.scss') //這里寫自己的文件路徑 } } ) 

在main.js里面引入即可。    或者是不在main.js引入,單獨在組件引入也可以。     在組件中的style標簽添加lang="scss"。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM