前言
在项目中我们经常会使用css变量来提高开发效率,其中使用scss变量方法如本文所示。
目录结构如下:
步骤
1、创建一个scss文件,并命名变量
$myScssColor: #a22e;
2、在vite.config.ts里面配置
看本文相关配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path"; // 引入方法
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [ // 配置 @ 指代 src
{
find: "@",
replacement: resolve(__dirname, "./src"),
},
],
},
// 本文相关配置
css: {
// css预处理器
preprocessorOptions: {
scss: {
// 定义全局的scss变量
// 给导入的路径最后加上 ;
additionalData: `@import '@/styles/test.scss';`
}
}
}
});
可能的坑
1、一定要在导入的文件路径上加 ; ,不然会报错!
2、配置了vite.config.ts之后,不用在main.ts里面再次引入了,也会报错!
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import MyGlobalCom from '@/components/index'
import '@/styles/test.scss' // 不需要引入
createApp(App).use(MyGlobalCom).mount('#app')
欢迎留言讨论~