Vue项目引入sass

　　最近两天手头的事情暂时搞完了，可以抽出空来学习一下东西，之前项目都是鹏哥搭建好了，我们在直接在里面写代码，sass语法用来写样式还是比较方便常用的，今天就来试试怎么引入和配置sass

 

参考文章：Vue项目使用sass

（1）首先是先用vue-cli构建一个新的vue项目

　　① 安装node

　　② node安装好后安装脚手架：npm install -g vue-cli

　　③ 构建vue项目：vue init webpack vue_exercise

　　④ 进入项目根目录，把项目运行起来：npm run dev

 

（2）安装sass

　　① npm install node-sass --save-dev

　　② npm install sass-loader --save-dev

　　如果网络不好，会导致安装失败，这时需要从淘宝镜像安装node-sass,

　　npm install -g cnpm --registry=https://registry.npm.taobao.org  （安装淘宝镜像）

　　cnpm install node-sass  --save （使用淘宝镜像安装node-sass）

 

（3）配置sass编译

　　打开根目录下build/webpack.base.config.js，在modules对象的rules数组中加入一个对象，如下：

　　

module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader',
      }
    ]
}

　　

　　看了下大佬的说法，loader: 'style-loader!css-loader!postcss-loader!sass-loader'主要针对vue1.0版本可用，在vue2.0中测试了下也是可以的，在vue 2.0 的sass配置也可以如下这样：

{
    test: /\.scss$/,
    loader: ['style', 'css', 'sass']
},

 

　　保存一下，然后去在组件中试了下sass语法已经可以正常编译了，nice，学了个好玩的东西...