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

在Vue項目中使用scss,若是寫了一套完整的有變量的scss文件。那麼就須要全局引入,這樣在每一個組件中使用。css

能夠在mian.js全局引入,下面是使用方法。node

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

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

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

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

3: 修改build中的utils.jsui

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"。spa

相關文章
相關標籤/搜索