1. 问题：
我在App.vue中@import '@/assets/css/index.less'引入了全局的less文件，但是在组件中使用时显示变量没有定义
2. 查阅资料过后发现：
根组件引入是不行的，需要单独在组件中引入该文件，单独引入太麻烦了，所以需要配置一下！！！
3. 安装less相关依赖
npm install less --save-dev
npm install less-loader --save-dev
npm install style-resources-loader --save-dev
4. 在vue.config.js文件里进行配置
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const path = require('path')
function addStyleResource(rule) {
rule
.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/assets/css/index.less') //全局引入的less文件
]
})
}
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: (config) => {
config.resolve.alias = {
'@': path.resolve(__dirname, 'src'),
components: '@/components'
}
},
chainWebpack: (config) => {
//配置开始
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach((type) =>
addStyleResource(config.module.rule('less').oneOf(type))
)
//配置结束
config
.plugin('AutoImport')
.use(AutoImport({ resolvers: [ElementPlusResolver()] }))
config
.plugin('Components')
.use(Components({ resolvers: [ElementPlusResolver()] }))
}
})
