创建多页面时的重复CSS

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome最新款 可复制演示链接 https://codesandbox.io/s/withered-bush-wv29dx?file=/index.js 描述一下那个虫子 如何复现这个漏洞？...创建多页 （ grapesjs.init）...检查每页的样式 预期的行为是什么？ 每个页面都包含自己的样式，不包括其他页面的CSS ... 目前的行为是什么？ 目前所有页面的CSS将合并并应用于所有页面。欲了解更多详情，请访问复制链接并查看所有页面的代码 ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则

artf · Accepted Answer

这是有意为之，我不打算改变这种行为，因为如果你需要每页不同的样式，可以很容易地创建特定的 CSS 选择器。 这种方法的最大好处是允许在不同页面间重复使用选择器。

hasan-aa · Answer

我觉得我遇到了这种方法的问题。 我把页面保存到服务器上是这样： “JS const component = page.getMainComponent（）; const css = editor.getCss（{ component， avoidProtected： true }） saveToBackendApi（component，css） 针对 ID 的 CSS 规则运行正常，但带类的规则即使加载在不同页面时也会重复。 例如，'.gjs-row' 类的 #s 规则在每次存档 + 加载后都会不断增加。

GJS Helper · Answer

你遇到的 GrapesJS 中多个页面重复 CSS 的问题，是一个常见的混淆点，涉及 GrapesJS 如何在编辑器实例内全局管理样式。默认情况下，GrapesJS的 CssComposer（负责管理所有 CSS 规则的组件）会累积样式。当你初始化多个具有各自styles属性的页面时，这些样式会被添加到全局 CssComposer中，并在所有页面保持活跃，导致样式合并的情况。 根本原因 GrapesJS 中的CssComposer设计为在单一编辑器实例内存储所有 CSS 规则的全局仓库。当你为每个页面定义styles时，pageManager.pagesGrapesJS 会将这些样式添加到这个全局作曲器中。当你在页面间切换时，它不会自动作用范围或清除样式。因此，所有初始化页面的所有样式同时存在于CssComposer中，使它们应用到当前渲染在画布上的页面。 解决方案：在选择时隔离页面样式 要实现每个页面的独立样式，你需要手动管理CssComposer，清除现有样式，只加载与新选中页面相关的样式。这可以通过监听page:select事件来实现。 以下是实现此修复的方法： 听page:s...

创建多页面时的重复CSS

问题

回答（3）

相关问答

Page update event doesn't fire

Css class name with '/' converted to '-'

The facebook plugin is not working in the grapes js

Flex Property not working in style manager

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

2026年构建一个SaaS页面构建器需要多少钱？

浏览插件分类