vue-cli3使用less全局变量

最新推荐文章于 2021-12-12 07:15:00 发布

原创最新推荐文章于 2021-12-12 07:15:00 发布 · 886 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #less #前端开发 #vue-cl3

vue 专栏收录该内容

4 篇文章

订阅专栏

解决Vue项目中使用Less全局变量的问题，通过安装vue-style-resources-loader插件并配置vue.config.js，实现在App.vue中全局引用Less变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cl3安装less之后默认无法使用全局变量，需要额外添加插件

解决方案

安装插件
```
vue add style-resources-loader
```
新建一个less文件存放全局变量

修改配置，进入vue.config.js（不存在就在项目根目录创建一个）

const path = require('path')

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 全局less变量存储路径
                path.resolve(__dirname, './src/style/theme.less'),
            ]
        }
    }
}