2

I have been going through research and tests for whole day and still found answers do not work for my case or I just do not understand how to properly implement them - therefore post here:

I have made a custom theme (not inheriting blank or luma; a standalone theme) in this path: app/design/frontend/CompanyName/default

And there I have css files (I am using grunt LESS) in this directory: web/css

There I have style files structured somewhat like this:

  • file1.less
    • dirA/file2.less
    • dirA/file3.less
      • dirA/dirB/file4.less
    • dirC/file5.less

Each style file is @import'ing next file, so all of them are chained together. For example, file1.less has line @import 'dirA/file2.less'; and so on.

I have added absolutely all less files to the dev/tools/grunt/configs/themes.js file, so that grunt know where and how to operate less files and generate css files.

With this theme everything is working just great.


Then I added another theme (which is child theme) in this path: app/design/frontend/CompanyName/newDesign. And it's parent theme is app/design/frontend/CompanyName/default;

Now I want to extend a css file in the child theme to change only one line, for example.

In newDesign theme I would like to extend less file which is located in this path of parent theme: web/css/dirA/file3.less.

How should this be properly handled?

As far as I understood, In child theme I have to create directory: web/css/source.

But what then? There should be only _extend.less file OR there I can make exactly the same folder and file structure as I have in the parent theme? - For example:

app/design/frontend/CompanyName/newDesign/web/css/source/dirA/file3.less
or it should be with _extend.less at the end, like this? - app/design/frontend/CompanyName/newDesign/web/css/source/dirA/file3_extend.less
or I cannot make it like this at all? .., and I have to use only app/design/frontend/CompanyName/newDesign/web/css/source/_extend.less file?

In any solution that will come up here, I have another question, related to the source folder under web/css: which files from that folder I have to add to the dev/tools/grunt/configs/themes.js file of child theme properties?

1

I've set my themes up the following way, might not be the cleanest solution, but works like a charm.

In your app/design/frontend/CompanyName/default/web/css/file1.less add @import '_extend.less'; at the bottom of the file.

Create app/design/frontend/CompanyName/default/web/css/_extend.less and app/design/frontend/CompanyName/newDesign/web/css/_extend.less

Leave the one in app/design/frontend/CompanyName/default empty. and make your changes in app/design/frontend/CompanyName/newDesign/web/css/_extend.less


For your question about the themes.js file. As long as file1.less imports all of your other less files, you'll just have to add the following in your themes.js

default_theme: {
       area: 'frontend',
       name: 'CompanyName/newDesign',
       locale: 'en_US',
       files: [
          'css/file1'
       ],
       dsl: 'less'
    }
  • This means that absolutely each less file in default theme must have imported it's own separate empty _extend.less file if I want to update, for example, 1 line in each default theme .less file? Of course, we can live with one _extend.less file for whole theme, but it is exactly the same situation as we can live with only one .less file for whole theme. As You can see I have multiple .less files because it is easier to structure them this way. They each are imported in different levels and contexts. Therefore also this question about multiple _extend.less files. I hope You understood my point. – Toms Bugna Feb 7 '18 at 11:41
  • 1
    As far as I'm aware of it's either this or overwriting the entire file. I actually hope that I'm wrong but unfortunately I haven't found any other solutions yet. I'll stick along this topic to check if someone else might have a better solution :) – Koen Feb 7 '18 at 11:58
  • 1
    Thank You alot. Anyway, Your answer is correct because: all instructions on internet is shown related to the inheriting blank or luma theme and therefore there is already @import'ed the _extend.less file for some .less files. In my case, everything is custom built, therefore I have to create myself _extend.less file in parent theme, import into .less file and then I can use in child theme the _extend.less file. This is what did not work for me because I thought that Magento2 automatically can extend any .less file in parent theme through source dir but it is not that way. Thank You. – Toms Bugna Feb 7 '18 at 15:13

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.