scss 配置全局样式以及变量

scss全局变量需要通过webpack配置，vue项目可在vue.config.js中配置

vue3 + vite

vite.config.js

export default defineConfig({
    css: {
        //css预处理
        preprocessorOptions: {
            scss: {
                charset: false,
                /* 引入var.scss全局预定义变量， 
                如果引入多个文件， 
                可以使用 
                '@import      
                    "@/assets/scss/globalVariable1.scss";
                    @import "@/assets/scss/globalVariable2.scss";'
                这种格式 */
                additionalData: `@use "~/styles/variables.scss" as *;`,
            }
        }
    },
    plugins: [
        vue(),
        Components({
            resolvers: [
                // element plus 自动引入修改主题色，使用预处理样式
                ElementPlusResolver({
                    importStyle: "sass",
                }),
            ],
        }),
    ]
})

plugins 配置 blog.csdn.net/weixin_4207…

配置@符号

// 配置 @ 符号 
resolve: { 
    alias: { 
        "@": resolve(__dirname, "src") 
    } 
}