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

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

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

<style lang="less">  
    [@baseBackGroundColor](/user/baseBackGroundColor) : #409EFF;  
    @baseBackColor :#F8F8F8;   
</style>

然后我在登录页面调用：

.portrait-row text:nth-child(2){  
    float: right;  
    color: [@baseBackGroundColor](/user/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)


更多关于uni-app中less全局变量如何实现？在APP.VUE里面定义less其他页面调用提示不存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

19 回复

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

更多关于uni-app中less全局变量如何实现？在APP.VUE里面定义less其他页面调用提示不存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

回复 SimpleJalon:解决了吗？

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

经测试，ok的

编译出错，能帮忙看看吗

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

回复 fulifen: 在

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

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

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

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

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

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

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

这个应该可以在vue.config.js中配置吧
pluginOptions: {
‘style-resources-loader’: {
preProcessor: ‘less’,
patterns: [
path.resolve(__dirname, ‘./src/styles/var.less’)
]
}
}

https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项

在uni-app中，实现less全局变量的定义和引用，通常可以通过在项目的配置文件中进行设置，使得所有页面都可以访问这些全局变量。下面是一个具体的实现方法：

1. 创建全局less文件

首先，在你的uni-app项目根目录下创建一个styles文件夹（如果不存在），然后在该文件夹中创建一个名为variables.less的文件。这个文件将包含你的全局less变量。

variables.less

// 定义全局变量
@primary-color: #1890ff;
@link-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@font-size-base: 14px;

2. 配置uni-app以引入全局less文件

接下来，你需要在vue.config.js（如果使用的是HBuilderX，则可能在manifest.json或pages.json中进行配置，具体视版本而定）中配置全局less文件的引入。以下示例假设你使用的是基于Vue CLI的uni-app项目结构。

vue.config.js

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 这里假设你的variables.less文件位于src/styles目录下
        globalVars: {
          hack: `true; @import "${path.resolve(__dirname, 'src/styles/variables.less')}";`,
        },
      },
    },
  },
};

3. 在页面中使用全局变量

现在，你已经成功配置了全局less变量，可以在任何页面的.vue文件中的<style lang="less">块中直接使用这些变量。

example.vue

<template>
  <view class="content">
    <text class="title">Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  name: 'Example',
};
</script>

<style lang="less">
.content {
  padding: 20px;
}

.title {
  color: @primary-color; // 使用全局变量
  font-size: @font-size-base; // 使用全局变量
}
</style>

通过以上步骤，你应该能够在uni-app项目中成功定义和使用less全局变量。注意，根据你的项目结构和构建工具的不同，配置文件的路径和名称可能会有所不同。确保路径正确，并且构建工具能够正确解析这些配置。

回到顶部