Vite+ts全局引入scss与实际使用

家人们，之前写的有问题，误导了快200多人，这个东西如果全局引入了，并且还要再script里面再引入，只能是创建一份scss的副本，就是全局引入的是一份，script里面引入另一份，这样就不会冲突了

 

首先上全局引入scss的代码

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入elementplus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 引入elementplus
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:
          '@import "@/styles/variables.scss"; @import "@/styles/mixin.scss";'
      }
    }
  }
})

其中的这段代码是关键，注意preprocessorOptions是以s结尾的

css: {
    preprocessorOptions: {
      scss: {
        additionalData:
          '@import "@/styles/variables.scss"; @import "@/styles/mixin.scss";'
      }
    }
  }