更改 mixins.scss 不会更改导入它的 CSS 文件答案

【问题标题】：Changing mixins.scss does not change the CSS files importing it更改 mixins.scss 不会更改导入它的 CSS 文件
【发布时间】：2014-11-03 11:26:18
【问题描述】：

这是我们正在做的事情：

我们正在创建一个挂钩来修改\html\css\common\_mixins.scss 文件。

部署时的文件已更新。到目前为止一切顺利。

问题是导入这个 mixin 的 CSS 文件没有显示任何更改，例如这个文件 - \webapps\ROOT\html\css\taglib\navbar.css。

经过调试发现\webapps\ROOT\html\css\taglib\.sass-cache中有一个.sass-cache文件夹，里面也有最终生成的文件navbar.css供门户使用。

现在，当我部署钩子时，导入此 mixin 的所有 CSS 文件都不会在 .sass-cache 文件夹中重新编译/重新生成，这使得钩子无用。

谁能告诉我是否有任何方法可以使用这个 mixin，或者有没有其他方法可以做到这一点，或者如果我知道如何使用这个 mixin，我可以手动重新编译所有 CSS 文件。

我还看到删除.sass-cache 不是一个选项，因为如果有热修复，liferay 也使用此文件夹来修补 CSS 文件。

环境

Liferay EE 6.2 SP9 与 Tomcat 捆绑

原因 _{来自comments}

我们需要更改此文件的原因是有一种方法可以禁用导航栏的响应元素。或者更好的是禁用整个门户的响应能力。由于响应能力是由于媒体查询。

谢谢

【问题讨论】：

标签： sass liferay liferay-6 mixins liferay-theme

【解决方案1】：

不可能通过钩子改变 _mixins.scss，这不仅仅是因为邪恶的 sass-cache。

_mixins.scss 是用 SASS 编写的，需要编译并存储在 sass-cache 中。每个主题都包含每个 sass 文件的编译版本。

唯一的方法是构建您自己的主题并更改 _mixins.scss 或 _diff 文件夹中的任何其他文件。

为什么需要修改那个特定的文件？

【讨论】：

好吧，我确实更改了那个文件，如果我删除了 .sass-cache 文件夹，我的更改就会显示出来，也就是说，_mixins.scss 的更改已被采纳。我需要这个文件来自定义respond-to mixin。您说 唯一的方法是构建您自己的主题并更改 _mixins.scss 或 _diff 文件夹中的任何其他文件。 - 那么如何将更改应用到媒体 -查询 taglib 和门户文件夹，因为它们不是主题的一部分？
我认为 taglib 路径中存在 navbar.css 或类似的 css 是一个很大的错误。我的方法是通过钩子直接更改navbar.css，而不重写主题_mixins.scss。我认为它更安全可靠。
是的，我正在尝试，让我们看看是否有回报。
它的工作方式非常棒。即使在更改了 .sass-cache 文件夹中相同文件的 navbar.css 之后，它仍然无法正常工作，最后发现它是因为文件 /html/css/main.css 实际上应该更新但不幸的是更新此文件不会更新/html/css/.sass-cache/main.css 因此它不起作用。
有意思，navbar.css 也是 sass 编译的，属于 sass-cache 规则。好烦大哥。如果我是你，我会找到一种使用主题强制导航栏新样式的方法。

【解决方案2】：

所以这些变化没有反映出来，我认为 CSS 不是用来挂钩的。

所以在尝试了很多东西之后，我们仍然无法禁用响应，所以我们在主题的custom.css 中应用了以下 CSS。这适用于导航栏，对于其他我们可以再次单独包含这些样式。

@media (max-width: 979px) {
    .navbar .container {
        position: initial;
    }
    .navbar .container .btn-navbar {
        color: initial;
        display: none;
        margin-bottom: initial;
        width: initial;
    }
    .navbar .container .btn-navbar > .icon-bar:first-child {
        margin-top: initial;
    }
    .navbar .container .btn-navbar > .icon-bar:last-child {
        margin-bottom: initial;
    }
    .navbar .container .nav-collapse {
        display: initial;
    }
    .navbar .container .nav-collapse.open {
        display: initial;
        height: initial;
        overflow: initial;
    }
    .navbar .container .nav-collapse .btn {
        padding: initial;
    }
    .navbar .container .navbar-search {
        margin: initial;
        padding: initial;
    }
    .navbar .container .navbar-search .btn,
    .navbar .container .navbar-search .btn-link {
        clip: none;
        position: initial;
    }
    .navbar .container .navbar-search .form-search {
        margin: initial;
    }
    .navbar .container .navbar-search .form-search .input-append {
        display: initial;
        padding-right: initial;
    }
    .navbar .container .navbar-search .form-search .input-append .search-query {
        width: initial;
    }
}

此 CSS 代码取自 this Liferay forum post。

【讨论】：