uni-app 在 script 标签里使用 import 引入 scss 文件，编译到小程序会因头部缺少“;”号导致后续 css 代码不生效

uni-app 在 script 标签里使用 import 引入 scss 文件，编译到小程序会因头部缺少“;”号导致后续 css 代码不生效

示例代码：

import xxx from '../xxx.scss'

操作步骤：

在任意页面的script标签内使用import引入scss文件，编译到小程序后，头部的@charset "UTF-8"没有以;结束

预期结果：

[@charset](/user/charset) "UTF-8";

实际结果：

[@charset](/user/charset) "UTF-8"

bug描述：

在style标签里使用@import引入scss文件编译成小程序代码后会在头部添加> @charset “UTF-8”;

这个是没问题的

然后在script标签里使用import引入scss文件，编译后添加的 @charset "UTF-8"会少个“;”导致后面css代码失效


更多关于uni-app 在 script 标签里使用 import 引入 scss 文件，编译到小程序会因头部缺少“;”号导致后续 css 代码不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在 script 标签里使用 import 引入 scss 文件，编译到小程序会因头部缺少“;”号导致后续 css 代码不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 编译问题。当在 script 标签中使用 import 引入 SCSS 文件时，编译器生成的 CSS 内容中 @charset "UTF-8" 确实会缺少分号，导致后续 CSS 规则失效。

问题原因： uni-app 编译器在处理 script 中导入的 SCSS 文件时，对字符集声明的格式处理不完善，遗漏了必要的分号。

解决方案：

  1. 临时方案： 避免在 script 标签中直接 import SCSS 文件，改用 style 标签中的 @import 引入
  2. 修改构建配置： 在 vue.config.js 中配置 loader 选项，强制添加分号：
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'sass-loader',
              options: {
                additionalData: '@charset "UTF-8";'
              }
            }
          ]
        }
      ]
    }
  }
}
回到顶部