Magento 2 - Importing LESS mixins/variables from lib

Question

Explanation

I'm really not a fan of loading all the CSS on every page regardless of whether it's required, to me this is bad practice. Therefore I am creating CSS files for certain areas, e.g homepage.css, account.css, product-page.css.

My problem is I now need to import Magento 2's variables and mixins, especially the media queries and media-common variables.

My Code

I have tried adding the below code to my LESS file but it returns an error, I have also tried reverse paths (../) but this didn't work and apparently is forbidden for security reasons (read in the Magento2 repo).

This is app/design/frontend/PartyShowroom/default/Magento_Cms/web/css/homepage.less.

// As this file is not imported we need to import the variables/mixins etc.

@import 'source/lib/_responsive.less';

@media-target: 'mobile'; // Sets target device for this file
@media-common: true; // Sets not to output common styles

@import 'source/_theme.less';

// My custom less being imported
@import 'layout/homepage/_homepage-carousel.less';
@import 'layout/homepage/_homepage-themes.less';

This still returns the error:

NameError: variable @media-common is undefined
in _homepage-carousel.less on line 4, column 9:

//  _____________________________________________
& when (@media-common = true) {

Yet the same code works in vendor/magento/theme-frontend-blank/web/css/styles-l.less despite the lib not being in the same directory.

Question

How can I import the mixins/variables from lib into my own custom CSS file?

Answer 1

@Ben You can just add a reference import (as @mrtuvn mentioned above), except your path can be to source/lib/_responsive.less in your custom file...this needs to be relative to your theme's web/css/ directory....as, once your files make their way down to:

var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css

There will be the entire lib/web/css contents copied here already...

So in your custom theme:

app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less

You'd add @import (reference) ../source/lib/_responsive.less and that'll do it. If your editor/IDE has a LESS plugin for syntax highlighting (like PhpStorm) it will complain about not being able to find the _responsive.less file at that path, but ignore it...since the contents of lib/web/css and your custom theme's css get copied over to the same structure under var/view_preprocessed.

UDPATE: Here's a link to my answer for this question elsewhere, I provide a lot more details: https://magento.stackexchange.com/a/152944/1956

UPDATE 2: Here's a link to the Magento UI Library Docs which give a reference to this relative import path for UI Library contents: http://magento2-demo.nexcess.net/pub/static/frontend/Magento/blank/en_US/css/docs/lib.html

Answer 2

You have to copy essential files inside these folder to your folder theme

lib/web/css/source/lib

lib/web/css/source/components

Example you have homepage.less, account.less, product-page.less below yourtheme/web/css
you can import file by edit your_theme\web\css\source\_variables.less and add this line below to apply your custom style

@import '../homepage.less';

UPDATE
You can import source files by this way

@baseDirToLib: "../../../../../../../lib";
//@import 'source/lib/_responsive.less'; ORIGINAL WAY
@import (reference) '@{baseDirToLib}/web/css/source/lib/_responsive.less';

Clear browser cache and refresh to apply new changed

Answer 3

Try adding in your custom less file:

//@magento_import 'source/lib/variables/_responsive.less';

Documentation about it: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-preprocess.html#fedg_css-magento-import

Hope this helps.