vue3中如何设置全局使用scss
时间: 2023-08-12 08:03:29 浏览: 357
在 Vue 3 中设置全局使用 SCSS,可以在 `src` 目录下新建一个 `main.scss` 文件,并在 Vue 项目的入口文件 `main.js` 中引入该 SCSS 文件。具体步骤如下:
1. 在 `src` 目录下新建 `main.scss` 文件,并写入全局 SCSS 样式:
```
// main.scss
$primary-color: #00bcd4;
body {
background-color: #f5f5f5;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: $primary-color;
}
```
2. 在 `main.js` 中引入 `main.scss` 文件:
```
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import './main.scss';
createApp(App).mount('#app');
```
3. 在组件中使用全局 SCSS 样式,只需要在 `<style>` 标签中写入:
```
// HelloWorld.vue
<template>
<div class="hello-world">
<h1>Hello World</h1>
</div>
</template>
<style lang="scss">
.hello-world {
padding: 20px;
background-color: #fff;
}
</style>
```
这样就可以在 Vue 3 中设置全局使用 SCSS 了。