vite+ts配置scss全局变量
时间: 2023-11-25 22:51:22 浏览: 46
以下是vite+ts配置scss全局变量的步骤:
1.安装依赖
```shell
npm install -D sass vite-plugin-style-import
```
2.在vite.config.ts中配置插件
```typescript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style`,
},
],
}),
],
});
```
3.在src目录下创建一个styles文件夹,并在其中创建一个variables.scss文件,用于定义全局变量
```scss
$primary-color: #1890ff;
```
4.在main.ts中引入variables.scss文件
```typescript
import './styles/variables.scss';
```
5.在组件中使用全局变量
```html
<template>
<div class="container">
<h1 style="color: $primary-color">Hello World</h1>
</div>
</template>
<style lang="scss">
.container {
background-color: $primary-color;
}
</style>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)