猿记录

一个记录、分享的博客

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

vue-cli 中使用全局的公共scss文件

2018-03-28 11:28:00 作者:yxl 次阅读 vue

在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。
步骤一: 安装node-sass、sass-loader、style-loader

    cnpm install node-sass --save-dev
    cnpm install sass-loader --save-dev
    cnpm install style-loader --save-dev    

步骤二: 安装sass-resources-loader

    cnpm install sass-resources-loader --save-dev


步骤三: 修改build中的utils.js

    scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/global.scss')
        }
      }
    )

可知,我是在assets中创建了一个global.scss文件。

最后,在组件中的style标签添加lang="scss",就OK了。
然后就可以在.vue组件中使用到global.scss 中所用到的方法、变量

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

编辑:yxl 关键词:
0

网友评论