防止从 jinja2 继承 CSS 包括答案

【问题标题】：prevent css inheritance from jinja2 include防止从 jinja2 继承 CSS 包括
【发布时间】：2019-10-18 02:29:54
【问题描述】：

我有一个通过 jinja2/flask 呈现的简单 HTML 页面 (main.html)。

main.html

{% extends 'layout.html' %}

{% include 'content1.html' %}
{% include 'widget1.html' %}
{% include 'widget2.html' %}

layout.html 包含所有页面的一些 CSS（引导程序）、JS 和一些 HTML（标题/菜单）。

我希望在这个 html 页面中简单地包含一些内容模板和一些“小部件”。小部件更复杂，因为它们包含自己的 JS 和 CSS（引导程序）......这会造成麻烦，因为 widget1.html 中的 CSS 会覆盖 main.html 的 CSS（考虑到包含，这并不意外）。

是否有某种方法可以“包含”widget1.html 而无需将其中的 CSS/JS 真正返回到父页面 (main.html)？

我宁愿不必重构 widget1.html，因为它是一个外部应用程序。这里有一个简单的解决方案吗？

提前致谢！

【问题讨论】：

您是否尝试过将外部 css 的链接包装在一个块内？类似 {% block links %} {% endblock %}
@Jayson_X - 感谢您的提示。试图将 css 包装在一个块中，但它没有解决问题。完全删除css确实有效（但会导致widgit中的其他问题。----
那么与其扩展布局，不如像其他人一样包含它。或者您从自己的 css 文件中删除冲突的 css 规则。
layout.html 的扩展与包含在我手中没有任何区别。鉴于主页（以及整个 UI）使用单一的引导 CSS，外部小部件也使用引导（不同的 css）这一事实导致许多（如果不是全部）css 规则发生冲突。我可以简单地在小部件中删除引导程序的使用，但是我会丢失一些小部件特定的格式。
是的，同意，这里与烧瓶无关。虽然我想其他人会遇到类似的问题（> 2 单页引导部署？）。似乎我只需要一些方法来隔离“widget1.html”代码——如果可能的话。抱歉，我自己不是前端开发人员 :)

标签： html css jinja2

【解决方案1】：

我在这里遇到了同样的问题。即使更改了.css，也没有重新加载，因为浏览器正在缓存信息。我找到了一个非常简单的方法。

我解决它的方法是使用从 time 模块中导入 ctime，如下所示：

从时间导入 ctime

然后，我将 ctime() 函数归因于烧瓶路线内的时间。像这样：

#@app.route('/home')
## def homepage():
##     return render_template('home.html' , time = ctime())

然后，在我的 html href 中，我这样做了：

## <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css')}}?{{time}}">

在参考路径的末尾添加 ?{{time}} ，时间信息将每秒更新一次，浏览器将无法识别 css 并将其缓存，因为浏览器会将新信息与之前的信息进行比较。

有了这个，你将成为你的实时 css。

希望这会有所帮助。

干杯！

-尼利奥

【讨论】：

【解决方案2】：

看到这个答案：How To Isolate a div from public CSS styles?

您可以创建一个包装类.isolate，并按如下方式使用它：

p {
  color: blue;
}

.isolate * {
  all: unset;
}

.example {
  border: 1px solid;
  padding: 1em;
}

<p>By default all text is blue.</p>
<div class="isolate example">
  <p>Within the "isolate" div, that CSS is removed</p>
</div>
<p>Outside of the div, default rules apply once again.</p>

【讨论】：