vue3.0使用sass入门教程_vue3安装sass

四个步骤实现在vue中使用sass样式

1、使用npm安装sass包

使用npm 安装 node-sass，sass-loader，安装使用–save-dev，在开发环境使用即可，安装具体版本如下：

"node-sass": "^4.14.1",
"sass-loader": "^9.0.3"
1
2

2、新建scss文件

scss代码片段如下：
_variables.scss

// colors
$colors: (
  "primary": #00E5FF,
  "purple": #9e6fef,
  "light-purple": #BFBDFF,
  'yellow': #FFF701
);
$base-font-size: 1rem;
$font-sizes: (
  xxs: 0.5714, // 8px
  xs: 0.7143, // 10px
  sm: 0.8571, // 12px
  md: 1, // 14px
  lg: 1.1429, // 16px
  xl: 1.4286 // 20px
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

style.scss

@import './variables';

// color
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
}

// font-size
@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、在main.js中引入style.scss文件

因为在main.js文件中引入的样式可全局使用，引入语句如下：
import ‘./assets/scss/style.scss’

4、在页面元素中引入样式即可

举个例子：

 <h3 class="text-purple">大五人格测试</h3>
1

实现如图：

以上，实现了简单的sass样式引入后，就可以抽离出常用的样式，封装出自己的scss文件啦，更多sass样式请关注接下来的文章。