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中
引入路径看具体需求改动