uni-app vite编译vue3框架时使用云打包出现编译错误

uni-app vite编译vue3框架时使用云打包出现编译错误

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 11
HBuilderX类型 Alpha
HBuilderX版本 3.2.9
手机系统 Android
手机版本号 Android 10
手机厂商 小米
手机机型 8
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

经查错，使用vite编译的demo中使用云打包功能，style标签增加lang=“scss”，出现 warnings when minifying css: [HBuilder] 00:03:17.433 > stdin:6:0: warning: “@charset” must be the first rule in the file [HBuilder] 00:03:17.435 6 │ @charset “UTF-8”; [HBuilder] 00:03:17.435 ╵ ~~~~ [HBuilder] 00:03:17.438 stdin:2:0: note: This rule cannot come before a “@charset” rule [HBuilder] 00:03:17.438 2 │ a[data-v-01e62d77] { [HBuilder] 00:03:17.440 ╵ ^ 编译后的css文件内容为 @charset “UTF-8”;a[data-v-01e62d77]{color:#42b983}.content{display:flex;flex-direction:column;align-items:center;justify-content:center}.logo{height:100px;width:100px}

删除lang="scss"就正常 或者 本地真机调试运行同样是正常的 唯独云打包的时候出现编译错误

vue页面 style lang=“scss” scoped .content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: inherit; .logo { height: 100px; width: 100px; } } /style

组件页面 style lang=“scss” scoped // 组件内加任意样式则会出现错误 .asdf { display: flex; } /style


更多关于uni-app vite编译vue3框架时使用云打包出现编译错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

遇到了同样的问题，楼主要是解决了，麻烦告知下

更多关于uni-app vite编译vue3框架时使用云打包出现编译错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


遇到了同样的问题，楼主要是解决了，麻烦告知下

vite打包编译问题，需要官方解决

同样的问题

解决方法 https://www.cnblogs.com/xiaozhuangge/p/15991547.html

这个编译错误是由于云打包环境中的CSS压缩工具对@charset规则位置要求更严格导致的。当使用lang="scss"时，编译后的CSS文件中@charset "UTF-8";没有出现在文件最前面，而是被其他CSS规则前置了。

解决方案：

  1. 全局CSS配置
    在项目根目录的vite.config.js中添加CSS配置，禁用@charset：
    export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        charset: false
      }
    }
  }
})
回到顶部