码迷,mamicode.com
首页 > Web开发 > 详细

vue安装scss,并且全局引入

时间:2018-03-14 15:09:55      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:glob   nod   load   utils   options   attribute   一个   name   generate   

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

 

1. npm install node-sass --save-dev

    npm install sass-loader --save-dev

    npm install style-loader --save-dev

2. npm install sass-resources-loader --save-dev

3.修改build中得utils.js

scss: generateLoaders(‘sass‘)

    修改成:

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

4.修改scss文件名为global.scss

vue安装scss,并且全局引入

标签:glob   nod   load   utils   options   attribute   一个   name   generate   

原文地址:https://www.cnblogs.com/dujunfeng/p/8566772.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!