webpack+vue2.0+手动添加sass的编译模板

github地址：https://github.com/liuxingzhijian1320/vue-scss
本人最近在研究vue，发现官方的脚手架中没有sass的模板的编译，查看一些资料 吧sass的模块加上去了，以下添加代码只显示有用的代码。 第一种方法是以前的格式，最新的scss的格式在最下面，建议使用第三种也是最简单的

1.我们需要下载sass的依赖包

npm install --save-dev sass-loader
npm install --save-dev node-sass  (注：sass-loader依赖于node-sass)

下面这2种的包 css-loader 和 vue-style-loader 官方的脚手架中有 不用下载的了

css-loader的作用: 我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。

style-loader: 将所有的计算后的样式加入页面中；

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

在main.js中这样操作
require('./app.css');  //./和是当前的目录同一级的意思

1.这里需要使用一个插件=》extract-text-webpack-plugin（作用：吧css样式从js中分离出来）

npm install extract-text-webpack-plugin --save-dev

var ExtractTextPlugin = require(‘extract-text-webpack-plugin’)

上面的图片的意思告诉你代码添加在哪里，下面同理

2.我们在module.exports中添加一些东西

 //解析.css文件
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", 'css')
            },

            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            }

图片展示

3 我们将css从js的文件中抽取出来

    plugins: [
        new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
    ]

测试：
我们在App.vue的添加html的

style的中代码：

lang =‘scss’ 是使用sass的语法 scoped 代码隔离作用域 使你的css的样式不会作用到其他vue文件中的样式

效果图：

多一句嘴 ：最近下载的官方的模板有些改变的 （这种方式比较的简单的）

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

webpack.base.conf.js 文件中

第三种：build/utils.js 这里面vue-cli生成的项目，已经默认加入了处理sass的loader 只需要下载

npm install --save-dev sass-loader
npm install --save-dev node-sass  (注：sass-loader依赖于node-sass)

如果是stylus的模板。下载相应的loader即可的，不需要在文件添加任何的代码了

ok！！！！抓紧去测试吧
详细的文章查看文档：http://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html