如何在vue项目中使用scss

我们知道一个组件中分为

<template> //结构
<script>  //逻辑行为
<style> //样式

在style中编写样式如何使用scss呢

首先下载依赖包： cnpm install node-sass sass-loader@7.3.1 --save

2、在build文件中打开webpack.base.config.js在rules里面加上以下配置
{
test: /.scss$/,
loaders: [“style”, “css”, “sass”]
}

3、在<style lang="scss">

这样我们就能使用scss了

4.样式作用域 添加scoped属性
(如果不添加scoped属性则编写的样式是全局的样式 加上scoped后写的样式只有本组件的类才有效果
{ 众所周知vue是单页面应用 }
)