Adding custom breakpoint for .media-width() mixin

[abitner08]

When using the .media-width() mixin it is necessary to use a predifined breakpoint. This can be seen in ROOT/lib/web/css/source/lib/_responsive.less

I was able to add in my own custom breakpoint to that file, however what are the proper steps to keep these edits within my current theme, rather than editing the lib files directly?

I checked the documentation and could not find an appropriate method. I am able to easily use

@media screen and only (extremum: custombreakpoint) {
  // styles
}

However, styles within this media query will not render in an order feasible for mobile-first development, barring some !important statements or increasing specificity.

[Styopchik]

same issue

[Mackelito]

Did you clear the css cache?

If magento requests the css file and it already exists then it will not regenerate the css (your changes will not exsist).

But if the css file is not found it will parse all the .less files and generate a new .css for you.