2

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?

  • how are you creating less files that only load on specific pages? i know this isn't the question you are asking, but if you could point me to how to set this up, i'm curious how you get this working, even if the variable imports aren't working they way you want them to. – circlesix Feb 27 '18 at 17:41
  • You can do this with Layout XML. So say you wanted a checkout CSS file you could add <css src="Magento_Checkout::css/checkout.css" /> to checkout_index_index.xml – Ben Crook Feb 27 '18 at 22:17
  • yes, but in the question you were asking about using less. Since everything i'm doing is in less, does magento convert that call to the checkout.css to a less file in the same location in the theme? and if so, how do you use grunt to compile that? After reading the question i was racking my head to how that would work, and couldn't find any info on setting that up. – circlesix Feb 27 '18 at 23:18
  • I've never done this but I think you'd just need to add Magento_Checkout::css/checkout.css to your theme in dev/tools/grunt/configs/themes.js. If that doesn't work try moving the file to the theme module and then leave out Magento_Checkout:: – Ben Crook Feb 28 '18 at 9:34
  • @BenCrook have you found any solution to implement area wise less file implementation. Actually, I'm facing the same issue. – Knight017 Jun 29 '18 at 12:33
2

@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

|improve this answer|||||
0

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

|improve this answer|||||
  • So the only way is to duplicate the lib? That doesn't sound like best practice :( I will give it a try though, thanks. – Ben Crook May 5 '16 at 20:57
  • Update my answer, give it a try. Hope it help you – mrtuvn May 5 '16 at 23:16
  • I've tried this and similar methods and unfortunately it doesn't work, when I try and import a less file by going back some directories and I clear pub/static (and clear caches) my styles-m and styles-l CSS files do not get processed. If I remove the import they will then be processed again so it must be the imports that are breaking the Less pre-processing. Have you managed to get your example working? – Ben Crook May 16 '16 at 13:34
  • @Ben-Space48 Did you manage to do this without duplicating the lib files? I have a similar situation with a custom theme (without a parent) that i want to import the lib less files when needed. – David Sep 6 '16 at 12:41
  • @David i think is there only way duplicate lib less files in your theme. You can't import external lib outside theme directory – mrtuvn Sep 7 '16 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.