uni-app nvue页面style标签内引入scss文件报错bug

uni-app nvue页面style标签内引入scss文件报错bug

开发环境 版本号 项目创建方式
Windows 20H2, 19042.870 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：20H2，内部版本号：19042.870

HBuilderX类型：正式

HBuilderX版本号：3.1.8

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：nova 7 SE 5G(CDY-AN00)

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

原本的代码：
<style lang="scss">  
    .dynamic {  
        margin-top: $uni-spacing-row-sm;  
    }  
</style>

我希望这样：
在一个独立的css文件中：
.dynamic {  
    margin-top: $uni-spacing-row-sm;  
}

然后通过import引入
<style lang="scss">  
    @import url("test.css")  
</style>

然后就报错了
ERROR: property value `$uni-spacing-row-sm` is not supported for `margin-top` (only number and pixel values are supported)

我尝试将css文件改为scss文件，并且改变引入的路径，仍然报出相同的错误。 似乎通过引入的方式，编译器并不能识别scss的代码 同时，我尝试了在css/scss文件中引入uni.scss，但是仍然不起作用。

操作步骤：

  1. 首先将如下代码写入一个独立的css文件中
.dynamic {  
    margin-top: $uni-spacing-row-sm;  
}
  1. 在一个nvue文件中引入这一css文件：
<style lang="scss">  
@import url("test.css")  
</style>
  1. 运行

预期结果：

css被正确的渲染

实际结果：

报错：

ERROR: property value `$uni-spacing-row-sm` is not supported for `margin-top` (only number and pixel values are supported)

bug描述：

我在一个nvue页面内的<style lang="scss"></style>标签内写了一些包含scss语言的代码 我希望通过一个独立的css文件来存放这些代码，然后再通过引入的方式引入到这个nvue页面 但是发现报错：

ERROR: property value `$uni-spacing-row-sm` is not supported for `margin-top` (only number and pixel values are supported)

更多关于uni-app nvue页面style标签内引入scss文件报错bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue页面style标签内引入scss文件报错bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，当使用 <style lang="scss"> 时，直接通过 @import url("test.css") 引入外部文件会导致 SCSS 变量无法被正确解析。这是因为 nvue 的样式编译机制与 vue 页面不同，nvue 的样式在编译时会被 Weex 引擎处理，而 Weex 对 SCSS 的支持有限。

具体到你的问题：

  1. 你创建了一个 .css 文件，但其中包含 SCSS 变量 $uni-spacing-row-sm。CSS 文件本身不支持 SCSS 变量，因此变量无法被解析。
  2. 即使将文件改为 .scss 扩展名，并通过 @import url("test.scss") 引入，在 nvue 中也可能无法正确编译，因为 nvue 的样式层在处理外部 SCSS 文件时可能不会触发完整的 SCSS 预处理流程。

解决方案：

  • 直接在 nvue 页面的 <style lang="scss"> 标签内编写 SCSS 代码，而不是通过外部文件引入。例如：
    <style lang="scss">
.dynamic {
    margin-top: $uni-spacing-row-sm;
}
</style>
回到顶部