vue在現在程序員圈中,已經是衆所周知了,那麼在我們去使用vue的過程中經常會使用強大的css預處理語言sass,那麼在這個過程中我們有各種問題,下面我們就簡單的介紹其中一個小編碰到的問題;
在使用scss中,我們定義了變量方便更改整個項目的配色,那麼我們在main.js
中引入全局scss
文件,但直接引入scss
文件會報錯。
那麼針對此類問題我們有兩種處理方式
第一、各個組件中引入(這個方法的弊端相信大家都看得到,就是需要在每一個組件中引入,寫重複的代碼)如下:
import ../assets/css/common.scss;
這種方式很顯然我們每個程序員都是不推薦的;
第二、全局引入
首先,需要安裝一個開發插件:sass-resources-loader
npm i sass-resources-loader --save-dev
接着,修改我們腳手架中build/utils.js文件,修改scss的加載設置
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
修改爲:
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/common.scss') } }), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
之後重新啓動項目,並且在main.js中引入公共的常量文件即可。