1、如果单纯在main.js中引入global.scss全局样式,不使用全局变量和方法等
找到 webpack.base.conf.js删掉下面的配置就可以了
{ test: /.scss$/, loaders: ["style", "css", "sass"] }
使用:main.js引入scss文件 import './assets/style/global.scss'即可。
2、如果既要引入全局css(scss)样式,又要用到全局变量或者方法,那么就要在步骤1的基础上安装sass-resources-loader插件,然后新建一个var.scss(自己命名)文件专门存放变量或者方法等,例如var.scss:
@charset "UTF-8"; $themeColor: #409eff; @mixin ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
然后找到 build/utils.js,将 scss: generateLoaders('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 公用样式了。
比如任意一个xxx.vue中可以这样用到
好了,大功告成。