uni-app stylus 全局注入在nvue中失效

uni-app stylus 全局注入在nvue中失效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：Alpha

HBuilderX版本号：3.1.21

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米

页面类型：nvue

打包方式：云端

操作步骤：

const path = require('path')  
module.exports = {  
    chainWebpack: config => {},  
    css: {  
        loaderOptions: {  
            stylus: {  
                import: [require('path').resolve(__dirname, "./uni.styl")],  
            },  
        }  
    }  
}
  1. 使用stylus 全局注入样式无效
$text-font-size = 32px

<template>  
     <text class="text1">仪表盘</text>  
</template>  
<style lang="stylus">  
.text1  
    font-size $text-font-size  
</style>
  1. 独立的stylus样式表 函数 无法使用条件编译
theme()  
    // #ifndef APP-NVUE  
    color #007AFF  
     // #endif

<template>  
     <text class="text1">仪表盘</text>  
</template>  
<style lang="stylus">  
@import './index'  
.text1  
    font-size $text-font-size  
        theme()  
</style>

预期结果：

  1. 页面里的字体为外面注入的样式表里的值
  2. 独立的stylus样式表可以使用条件编译

实际结果：

不起作用

bug描述：

  1. 使用stylus 全局注入样式无效
  2. 独立的stylus样式表 函数 无法使用条件编译

更多关于uni-app stylus 全局注入在nvue中失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app stylus 全局注入在nvue中失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，由于渲染机制差异，部分样式注入和条件编译功能存在限制。

针对全局 stylus 变量注入失效问题，nvue 页面的样式编译与 vue 页面不同，webpack 的 stylus loader 配置可能无法生效。建议改用 CSS 变量方案：

/* 在 App.vue 中定义 */
:root {
  --text-font-size: 32rpx;
}

<style scoped>
.text1 {
  font-size: var(--text-font-size);
}
</style>

关于 stylus 函数中的条件编译失效，这是因为条件编译指令需要在 webpack 编译阶段处理，而 stylus 函数内部的注释会被视为 stylus 语法而非预处理指令。建议将条件编译移至样式外层：

// #ifndef APP-NVUE
theme-color = #007AFF
// #endif

theme()
  color theme-color

或者直接使用平台差异化样式文件：

[@import](/user/import) './index.' + $platform + '.styl'
回到顶部