Magento2 LESS extend/override custom theme

Question

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?

Answer 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'
    }