uniapp vue2 引入view组件时出现some selectors are not allowed in component wxss问题如何解决

在uniapp中使用vue2开发时，引入view组件后编译报错"some selectors are not allowed in component wxss"，这个错误该如何解决？我检查了代码但没发现明显问题，不知道是不是uniapp的样式限制导致的。有没有遇到相同问题的朋友，能分享一下具体的解决方案吗？

2 回复

在uniapp中，这个错误通常是因为在组件的wxss中使用了不允许的选择器。

解决方案：

  1. 检查组件样式：确保组件wxss中只使用了class选择器，避免使用id选择器、标签选择器、属性选择器等。

  2. 使用styleIsolation：

export default {
  options: {
    styleIsolation: 'isolated'
  }
}

  1. 全局样式影响：如果是全局样式影响了组件，可以在page的wxss中使用page选择器包裹。

  2. 检查app.wxss：确保app.wxss中没有使用不允许的选择器。

  3. 使用深度选择器：如果需要覆盖子组件样式，使用>>>或/deep/：

.parent >>> .child {
  color: red;
}

建议先检查组件wxss文件，移除所有非class选择器，通常就能解决问题。


在 UniApp 中使用 Vue2 时，出现 “some selectors are not allowed in component wxss” 错误，通常是因为在小程序组件样式中使用了不允许的 CSS 选择器（如标签选择器、ID 选择器等）。以下是解决方法：

解决方案

  1. 检查并修改 CSS 选择器：

    • 在组件的 <style> 或 .wxss 文件中，避免使用标签选择器（如 div、span）或 ID 选择器（如 #id）。
    • 改用类选择器（如 .class-name）或符合小程序规范的样式规则。

  2. 示例代码：

    • 错误写法：
      div { color: red; } /* 标签选择器不允许 */
#myId { font-size: 16px; } /* ID 选择器不允许 */
    • 正确写法：
      .my-class { color: red; } /* 使用类选择器 */

  3. 全局检查：

    • 如果问题涉及多个文件，使用开发工具的 “运行到小程序” 功能，查看具体报错位置，并逐一修复。

  4. 注意事项：

    • 确保样式作用域正确，避免全局样式污染。在 Vue 单文件组件中，可使用 <style scoped> 限制样式作用域。
    • 如果使用外部 UI 库，检查其样式是否符合小程序规范。

通过以上调整，问题通常可以解决。如果仍有错误，请提供具体代码片段以便进一步排查。

回到顶部