vue项目及vite中引入预处理全局scss文件

vite中引入预处理全局scss文件

vue项目中引入

const path = require('path');

module.exports = {  
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [path.resolve(__dirname, 'src/assets/global.scss')] // 引入全局样式变量
    }
  }
};

复制此段代码至vue.config.js中
引入路径看具体需求改动

vite2中引入

Vue 3全新的Web开发构建工具–Vite
Vite是在推出Vue 3的时候开发的，目前仅支持Vue 3.x，这意味着与Vue 3不兼容的库也不能与Vite一起使用。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "element-plus",
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        },
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
    },
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        additionalData: '@import "./src/assets/global.scss";',
      },
    },
  },
  base: "/", // 设置打包路径
});

复制此段代码至vite.config.js中
引入路径看具体需求改动