vue3安装sass步骤详解

sass的便捷使我们在开发中更加如鱼得水,那么面对如此神器我们在vue3中又该如何使用呢?接下来我们从安装到使用进行一个详细的介绍:

1、对于vue3中对sass的安装

npm install node-sass sass-loader sass -D

当顺利截图内容时,证明你的sass已经顺利安装。版本号忽略不计,这个会根据版本的更新进行变化。


2、安装完成后就是对于sass的应用,对于sass的应用一般常规分为两种方式。

2.1、页面内样式应用

<style lang="scss">
p{
span{
color: #f00;
}
}
</style>

2.2、创建scss文件,在需要或者主入口中引用

比如我们在css文件加中创建了一个common.scss文件,要在指定页面中引用。

首先打开需要引入的页面,引入代码如下:

<style lang="scss">
@import "../css/common.scss"
</style>

以上便是关于sass的常规使用方式。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!