vue-scss

在项目中引入scss

webpack构建 的项目 都需要一个loader 这里先说一下vue-loader 以便理解，vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以需要在webpack构建的vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss​​文件 ​​

1.安装loader配置 

在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗，然后它根据lang属性自动判断出要使用的loaders。所以，其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
现在我们来安装sass/scss loader

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

2.在build文件的webpack.base.conf.js中 module下的rules 添加 scss 解析的规则

{
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },

3.在style中使用scss

<style scoped lang="scss">
$color:red;
div {color:$color;}
</style>

　　暂时先写这么多 以后在遇到坑 在进行补充 这里主要针对vue2.0 有个博客写了vue1中当然scss的使用 ​​戳这里​​