前言:
Vue项目是vue-cli脚手架来搭建的项目,它是基于webpack构建的。Vue项目是使用create-vue 创建基于Vite构建。这两种写法不一样。
一.场景
当我们写项目时 往往会使用less或scss来编辑css样式。这时如果有多处页面使用同一个样式或者变量的话,我们就需要把这些抽离出来一个公共的文件,然后在每个文件引入使用。
所以这里我们要做的就是简化写法,不用每个页面都引入文件。
1. var.less文件
@fontcolor: red;
2. 使用
<style scoped lang="less">
@import './var.less';
.app {
color: @fontcolor;
}
</style>
二. 简化写法
干预webpack配置。链接
调整 webpack 配置最简单的方式就是在 vue.config.js
中的 configureWebpack
选项提供一个对象:
~@是绝对路径: 从src目录开始 去找到这个公共模块的文件。
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `@import "~@/var.less";`
}
}
}
}
三. Vite
如果Vue项目是使用Vite来创建的写法差不多 但是需要看Vite文档就行修改。链接
vite.config.js文件配置
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'~@': './src'
}
},
css: {
preprocessorOptions: {
less: {
additionalData: `@import "~@/var.less"`,
}
}
}
})