uni-app App平台 v3 模式暂不支持在 js 文件中引用，请改在 style 内引用

类别	信息
产品分类	uniapp/App
PC开发环境	Mac
操作系统版本	Ventura 13.2
HBuilderX类型	正式
HBuilderX版本	4.08
手机系统	全部
手机厂商	华为
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

测试过的手机

小米cc9，mac模拟器

操作步骤

没有代码

预期结果

不提示这个错误，能正常编译和打包app

实际结果

不能编译，卡在这里

bug描述

官方的模块报错

第一个图片是我引用的，在style里面会报错，后面都是你们的模块报错，之前都是好的，不知道怎么的突然出现这个问题，我恢复前天的代码，还是这个报错。

更多关于uni-app App平台 v3 模式暂不支持在 js 文件中引用，请改在 style 内引用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

更多关于uni-app App平台 v3 模式暂不支持在 js 文件中引用，请改在 style 内引用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 的 App 平台 v3 模式下，如果你在 .js 文件中引用了样式文件（如 .css、.scss 等），可能会遇到不支持的情况。这是因为在 v3 模式下，uni-app 对样式的引用方式进行了调整，推荐直接在 .vue 文件的 <style> 标签内引用样式。

解决方法

直接在 <style> 标签内引用样式文件：

将样式文件直接在 .vue 文件的 <style> 标签内引用。例如：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  }
}
</script>

<style>
[@import](/user/import) './styles/main.css';
</style>

在 <style> 标签内直接编写样式：

如果你不想引入外部样式文件，可以直接在 <style> 标签内编写样式：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 20px;
  color: #333;
}
</style>

使用 scoped 样式：

如果你希望样式只作用于当前组件，可以使用 scoped 属性：

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 20px;
  color: #333;
}
</style>

使用 lang 属性支持预处理器：

如果你使用的是 CSS 预处理器（如 SCSS、Less 等），可以通过 lang 属性指定：

<style lang="scss">
[@import](/user/import) './styles/main.scss';

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 20px;
  color: #333;
}
</style>