SimpleJalon
SimpleJalon
  • 发布:2018-08-23 13:28
  • 更新:2020-05-08 20:14
  • 阅读:6299

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

分类:uni-app

在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
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 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

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

  • SimpleJalon (作者)

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

    2018-08-24 11:46

  • 190389518@qq.com

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

    2018-10-20 11:29

  • 1137774080@qq.com

    回复 SimpleJalon:解决了吗?

    2019-03-28 11:10

609361647@qq.com

609361647@qq.com

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

010101 - 12

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

  • SimpleJalon (作者)

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

    2019-10-14 18:55

  • 247328581@qq.com

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

    2020-03-29 17:16

  • 247328581@qq.com

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

    2020-03-29 17:17

wzZhao

wzZhao - s

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

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

    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

要回复问题请先登录注册