vue cli
- webpack: 构建工具
- less-loader: 处理样式代码
vue.config.js
js
const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
css: {
loaderOptions: {
scss: {
additionalData: `@import "~@/styles/var.scss";`, // 这里用绝对路径,分号不要漏掉了
},
},
},
})
vite
- esbuild: 应用在开发环境中
- rollup: 应用在打包环境中
vite.config.js
javascript
// import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
module exports defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': './src',
},
},
// resolve: {
// alias: {
// '@': fileURLToPath(new URL('./src', import.meta.url))
// }
// },
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/var.scss";`, // 这里用绝对路径,分号不要漏掉了
},
},
},
})
组件中直接使用全局SASS的变量、混合器等样式,无需引入样式文件
LESS同理