vue-cli中全局引入sass

前言

本来我之前就写过一片关于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)