less全局变量如何实现？在APP.VUE 里面定义less 其他页面调用提示不存在

分类：uni-app

less

在app.vue 里面定义了一个变量

<style lang="less">  
    @baseBackGroundColor : #409EFF;  
    @baseBackColor :#F8F8F8;   
</style>

然后我在登录页面调用：

    .portrait-row text:nth-child(2){  
        float: right;  
        color: @baseBackGroundColor;  
    }

编译后报错：

13:25:56.371 Module build failed:
13:25:56.371 border-radius: 8rpx;
13:25:56.371 background:@baseBackGroundColor;
13:25:56.372 ^
13:25:56.372 Variable @baseBackGroundColor is undefined
13:25:56.372 in D:\php\HB_aisuizhou_app\APP\pages\ucenter\login.vue (line 177, column 12)
13:25:56.372 Module build failed: ModuleBuildError: Module build failed:
13:25:56.372 border-radius: 8rpx;
13:25:56.373 background:@baseBackGroundColor;
13:25:56.374 ^
13:25:56.374 Variable @baseBackGroundColor is undefined
13:25:56.374 in D:\php\HB_aisuizhou_app\APP\pages\ucenter\login.vue (line 177, column 12)
13:25:56.374 at runLoaders (D:\php\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModule.js:192:19)
13:25:56.375 at D:\php\HBuilderX\plugins\uniapp\node_modules\loader-runner\lib\LoaderRunner.js:364:11
13:25:56.375 at D:\php\HBuilderX\plugins\uniapp\node_modules\loader-runner\lib\LoaderRunner.js:230:18
13:25:56.375 at context.callback (D:\php\HBuilderX\plugins\uniapp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
13:25:56.375 at <anonymous>
13:25:56.376 at runMicrotasksCallback (internal/process/next_tick.js:121:5)
13:25:56.376 at _combinedTickCallback (internal/process/next_tick.js:131:7)
13:25:56.376 at process._tickCallback (internal/process/next_tick.js:180:9)

2018-08-23 13:28 负责人:无分享

4 个回复

Neil_HL

在App.vue不能写less的全局变量。
你可以单独写一个less文件存放全局变量，页面需要使用时引入这个less文件就行啦。

SimpleJalon (作者)

哦，不能支持下一次性直接引入吗？每次引入好麻烦的样子.

2018-08-24 11:46
1***@qq.com

还有，单独放在一个文件里面修改后不会自动编译相关引用的文件

2018-10-20 11:29
1***@qq.com

回复 SimpleJalon:解决了吗？

2019-03-28 11:10

6***@qq.com

let path = require('path');  
let vars = path.resolve(__dirname, 'style/variable.less')  
module.exports = {  
    css: {  
        loaderOptions: {  
            less: {  
                globalVars: {  
                    "hack": `true; @import "${vars}"`  
                }  
            }  
        }  
    }  
}

z***@aliyun.com

经测试，ok的

2020-06-02 10:34
fulifen

编译出错，能帮忙看看吗

2020-06-13 12:42
fulifen

回复 z***@aliyun.com: hello，在吗

2020-06-13 12:43
z***@aliyun.com

回复 fulifen: 在

2020-06-13 16:26
fulifen

回复 z***@aliyun.com: sorry,现在才回

2020-06-25 21:38
fulifen

回复 z***@aliyun.com: 是在uniapp中吗 ?我复制代码编译出错,uniapp当中可以这么写吗

2020-06-25 21:39
8***@qq.com

回复 fulifen: 可以的，在根目录下创建一个vue.config.js，然后在里面写这段就OK了

2020-08-18 17:21

010101 - 12

目前less可以实现全局变量吗

SimpleJalon (作者)

看官方技术解答单独放个公共文件就好了。

2019-10-14 18:55
DawnGruel

回复 SimpleJalon: 那个好麻烦，用到都要引入一遍，如果它开了编译配置，就可以直接改，全局配置变量了

2020-03-29 17:16
DawnGruel

回复 SimpleJalon: 其实它提供了全局变量但是你必须使用scss，在根目录下是有全局样式变量的uni.scss

2020-03-29 17:17

gftttrrtrt4 - s

这个应该可以在vue.config.js中配置吧

pluginOptions: {  
    'style-resources-loader': {  
      preProcessor: 'less',  
      patterns: [  
        path.resolve(__dirname, './src/styles/var.less')  
      ]  
    }  
  }

gftttrrtrt4

https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9

2020-04-30 13:15

该问题目前已经被锁定, 无法添加新回复

less全局变量如何实现？在APP.VUE 里面定义less 其他页面调用提示不存在

4 个回复

公告

相关问题

less全局变量如何实现？在APP.VUE 里面定义less 其他页面调用提示不存在

与内容相关的链接

4 个回复

公告

相关问题