vue2.0 使用vue-cli搭建项目,引用全局scss,全局注入变量和方法等

一、若是单纯在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

好了,大功告成。插件

相关文章
相关标签/搜索