问题 #2363✓ 已解决提出于 2019年10月31日作者 CatalinCernea2 个反应

有没有快速的方法可以在导出时重命名 CSS 类?

快速解答作者 devmohitagarwal2

你好@iColdoCatalin, 我们也遇到过同样的问题,通过对CSS进行沙箱化解决了这个问题。为此,我使用了sass.js(https://github.com/medialize/sass.js/) 步骤:将css字符串与你的自定义类一起包裹。比如说MyCustomClass。运行上述库中的 sass.compile,将 scss 转换为 css,后者现在与 give 类沙箱化, 这样你就不会遇到冲突的问题。 请随时告诉我进展,因为我们做的远不止这些(我们还用class替换了ID)

阅读下方完整回答 ↓

问题

你好,

因为我们想导出生成的HTML和CSS并集成到另一个网站,很可能会有同名的CSS类,这可能会导致界面问题。 我们考虑在导出后重新命名它们,并在每个职业上加一个前缀,但不知道该怎么实现,或者这是否是好事。

有人遇到过类似情况吗?你们是怎么解决的?

回答(3)

👍 最有帮助devmohitagarwal2019年11月1日

你好@iColdoCatalin, 我们也遇到过同样的问题,通过对CSS进行沙箱化解决了这个问题。为此,我使用了sass.js(https://github.com/medialize/sass.js/)

步骤

  1. 将css字符串与你的自定义类一起包裹。比如说MyCustomClass。
  2. 运行上述库中的 sass.compile,将 scss 转换为 css,后者现在与 give 类沙箱化,

这样你就不会遇到冲突的问题。

请随时告诉我进展,因为我们做的远不止这些(我们还用class替换了ID)

CatalinCernea2019年11月4日

你好@iColdoCatalin,我们也遇到过同样的问题,并通过沙箱化解决了CSS。为此,我使用了sass.js(https://github.com/medialize/sass.js/)步骤:1.用你的自定义类包裹CSS字符串,比如MyCustomClass。2.从上述库运行 sass.compile,将 scss 转换为 css,后者现在用 give 类沙盒,这样你就不会遇到冲突的问题。请随时告诉我进展,因为我们做的远不止这些(我们还用class替换了ID)。 谢谢你的帮助@devmohitagarwal @artf。非常感谢。 我打算试试两种方案,看看Witch One更适合我们。...

相关问答

通过相似的问题讨论继续研究。

问题 #6152

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?添加带有HTML + CSS的自定义代码组件删除自定义代码组件。 预期的行为是什么?...

4 个回答更新于 2024年10月9日

问题 #5460

从“pageManager”加载“组件”和“样式”

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v117.0.5938.149可复制演示链接 https://jsfiddle.net/9oLrsvya/描述一下那个虫子 如何复现这个漏洞?请参见 jsfiddle 中的“pageMa...

4 个回答更新于 2023年11月28日

问题 #3627

:我正在尝试复制页面,但由于 ID,样式无法应用,结尾的 -2,-3 发生了变化。

“JavaScript const duplicatePage = (编辑者) => { let components = editor.getHtml(); 令 css = editor.getCss(); 让newPage = 编辑器。Pages.add({ 样式:CSS,...

4 个回答更新于 2023年2月17日

问题 #3727

风格导入问题

你好,@artf, 详细描述这个漏洞 在用 GrapesJS 创建新模板时,我遇到了一个情况:当我们尝试从 import modal 导入 CSS 时,编辑器中没有反映出来。在一个空白编辑器上,我创建了一个模板,添加了HTML和CSS。之后,我需要在CSS部分做一些修改,为此,...

4 个回答更新于 2023年1月6日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

浏览插件分类

直接跳转到市场上的插件分类页面。