猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue-cli全局引入公用scss文件

2018-08-08 15:41:54 作者:yxl 次阅读 vue

首先需要安装一个开发插件:sass-resources-loader

npm i sass-resources-loader --save-dev

然后修改vue-cli的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/scss/base.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

其中path.resolve需要传入待引入的scss文件,__dirname代表当前目录,然后一步步找到自己的base.scss(保存后需要重启开发命令:npm run dev)

开始食用
首先在base.scss中定义自己需要的变量

$color:red;


然后我们在模板中直接使用

.child{

color:$blue;

}



凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论