Changing mixins.scss does not change the CSS files importing it

Question

Here is what we are doing:

• we are creating a hook to modify the \html\css\common\_mixins.scss file.

The file when deployed is updated. So far so good.

The problem is the CSS files which are importing this mixin are not showing any changes, for example this file - \webapps\ROOT\html\css\taglib\navbar.css.

After some debugging I found that there is a .sass-cache folder in \webapps\ROOT\html\css\taglib\.sass-cache which also has the final generated file navbar.css which is used by the portal.

Now when I deploy the hook all the CSS files which import this mixin are not recompiled/regenerated in .sass-cache folder, which makes the hook useless.

Can somebody tell me if there is any way to make use of this mixin or is there anyother way to do this or may be I can manually recompile all the CSS files using this mixins if only I knew how to.

Also I see that deleting the .sass-cache is not an option since this folder is also used by liferay to patch CSS files if there is a hot-fix.

Environment

Liferay EE 6.2 SP9 bundled with Tomcat

---

Reason _{from the comments}

The reason why we need to change this file is to have a way to disable responsive elements for the navigation-bar. Or better still disable responsiveness for the whole portal. Since the responsiveness is due to the media-query.

Thanks

Answer 1

So the changes were not reflected and I think CSS is not meant for hooking.

So after trying a lot of stuff, still we were not able to disable responsiveness, so we applied the following CSS in our custom.css in our theme. This worked for the navigation bar, for others we can again include those styles individually.

@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;
    }
}

This CSS code is taken from this Liferay forum post.