美文网首页
vue-cli中全局引入sass

vue-cli中全局引入sass

作者: 前端_周瑾 | 来源:发表于2018-05-17 21:50 被阅读0次

前言

本来我之前就写过一片关于vue-cli中引入sass的简书,但是最近入然发现不能用了,如果在本篇的方法下引入的sass不管用的话,不妨试一试之前的方法
点我跳转之前的sass教程

新的vue-cli中引入sass支持开始 go!

1、安装node-sass、sass-loder、style-loader、sass-resources-loader
ps: 这四个一个都不能少哦!

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

2、 修改build中的utils.js
首先,在src/assets/css 目录下创建一个sass文件

scss: generateLoaders('sass')

    修改成:

scss: generateLoaders('sass').concat(
  {
      loader: 'sass-resources-loader',
      options: {
      resources: path.resolve(__dirname, '../src/assets/css/app.scss')//注意这里改成自己的路径
    }
   }
 )

最后一步,别丢了

在组件的style标签中添加 lang='scss'


image.png

相关文章

网友评论

      本文标题:vue-cli中全局引入sass

      本文链接:https://www.haomeiwen.com/subject/yswidftx.html