一、若是單純在main.js中引入global.scss全局樣式,不使用全局變量和方法等css
找到 webpack.base.conf.js刪掉下面的配置就能夠了vue
{ test: /\.scss$/, loaders: ["style", "css", "sass"] }
使用:main.js引入scss文件 import './assets/style/global.scss'便可。webpack
二、若是既要引入全局css(scss)樣式,又要用到全局變量或者方法,那麼就要在步驟1的基礎上安裝sass-resources-loader插件,而後新建一個var.scss(本身命名)文件專門存放變量或者方法等,例如var.scss:web
@charset "UTF-8"; $themeColor: #409eff; @mixin ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
而後找到 build/utils.js,將 scss: generateLoaders('sass'),修改成以下:sass
scss: generateLoaders('sass') .concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/var.scss') //這裏是單獨建的存放變量的scss,個人是 var.scss } } ),
使用: main.js 引入 import './assets/style/global.scss'; 而後在.vue文件中,能夠直接使用 $themeColor 變量 和 ellipsis 公用樣式了。ui
好比任意一個xxx.vue中能夠這樣用到spa
好了,大功告成。插件