5、Vue3 集成Sass和Scss

Vue 项目安装sass-loader node-sass

默认Vue项目不能够解析sass或scss。

vue create vue3Demo
cd vue3Demo
npm install

#安装sass-loader node-sass
npm install -D sass-loader node-sass  
#or
cnpm install --save sass-loader node-sass 

vue组件此时可以写Sass或Scss CSS样式语法了

Scss 可以实现在1个CSS块中定义另外1个CSS样式

<template>
    <div>
        <div class="mySass">
            <span>居中DIV，采用SASS/SCSS 语法</span>
        </div>
    </div>
</template>

<!--lang可以配置scss,scoped表示这里写的CSS只作用在当前组件上-->
<style lang="scss" scoped>
.mySass{
    width: 100px;
    height: 100px;
    background-color: #0fc991;
    margin: 0 auto;

    span{
        color: red;
    }
}
</style>

VS Code 需要安装对应插件

1. vscode安装插件Sass.
2. 同步安装插件Live Sass Compiler.