uni-app 打包发行后css选择器引号消失 导致无法正常显示样式

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app 打包发行后css选择器引号消失 导致无法正常显示样式

项目信息 详细信息
产品分类 uniapp/小程序/QQ
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 23H2
HBuilderX类型 正式
HBuilderX版本号 4.36
第三方开发者工具版本号 0.71
基础库版本号 1.72.1
项目创建方式 HBuilderX

操作步骤：

百分百复现

预期结果：

正常显示

实际结果：

无法显示

bug描述：

打包前css：

为什么无法插入图片，而且代码用文字写出来会被删除

打包后css：

[class*=gi-]:before {}


Harmonyos Next教程
2 回复

感谢反馈，经过测试，在除了 QQ 小程序的平台上的其它平台都是正常的。
一般来说，对于有没有引号，是没有影响的，因此在发行时都会把这个引号去掉，以压缩代码，在 QQ 小程序上不生效应该是有 QQ 小程序的实现不同导致。你暂时可以使用运行到小程序。


在uni-app开发过程中，如果遇到打包发行后CSS选择器引号消失的问题，这通常是由于构建工具或压缩工具在处理CSS时的不当行为导致的。虽然直接定位到具体的构建或压缩配置可能需要根据具体的项目配置和环境进行调整，但我们可以尝试通过一些方法来确保CSS选择器中的引号被正确处理。

以下是一个示例，展示如何在uni-app项目中通过配置Webpack（如果项目使用Webpack进行构建）来确保CSS中的引号不被移除。需要注意的是，uni-app默认使用的是Vite进行构建，但原理类似，你可能需要调整配置以适应Vite或其他构建工具。

示例：Webpack配置

如果你使用的是Webpack，可以尝试在webpack.config.js中添加或修改CSS loader的配置，确保CSS压缩时保留引号。以下是一个示例配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ... 其他配置
  optimization: {
    minimize: true,
    minimizer: [
      `...`, // 其他minimizer配置
      new CssMinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
              // 确保CSS选择器中的引号不被移除
              mergeRules: false, // 或者根据需要调整此选项
              minifySelectors: { collapseWhitespace: true, keepQuotes: true }, // 关键配置
            },
          ],
        },
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')(),
                  // 其他postcss插件
                ],
              },
            },
          },
        ],
      },
      // ... 其他loader配置
    ],
  },
};

注意

  1. uni-app默认配置：uni-app默认使用Vite进行构建，因此你可能需要查阅Vite的文档来调整相应的CSS处理配置。
  2. 插件和loader：确保你使用的CSS处理插件和loader是最新的，因为旧版本可能包含已知的bug。
  3. 测试：在修改配置后，务必进行充分的测试以确保问题得到解决，同时没有引入新的问题。

如果项目使用的是Vite或其他构建工具，原理类似，你需要查阅相应的文档来调整CSS处理配置。希望这个示例能帮助你解决问题。

回到顶部