在vue中使用 sass预处理器（入门篇）

1. 先下载包，两个包一起下，分开下都行

cnpm install -D sass-loader node-sass

//scoped 加上后此组件的 CSS 只作用于当前组件中的元素
//如何实现： 是通过给不同组件里的div加上不同的属性

//加上lang="scss" 
<style lang='scss' scoped>
//定义变量这样组件里需要用到的一样的属性就可以使用这个变量，提高了效率
//变量名需要$符合开头
    $c_r:red;
    $c_t:blue;
    $f_M:"楷体";
    .demo {
        color: bisque;
        font-size: 20px;
        .aaa{
            color: $c_r;
        }
        .bbb{
            color: $c_t;
            font-family: $f_M;
        }
    }
</style> 

• 不同组件的元素都带有不同的属性 data-v-xxxx
  

• 这个包有时下载下来会报错，运行不了
  

• 解决办法：

重新下载 将终端关掉 重新 cnpm run serve
如果还不行 简单粗暴的将node_modules包删掉 重新下载依赖 cnpm i

Vue文档连接