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?
Best Answer
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
andapp/design/frontend/CompanyName/newDesign/web/css/_extend.less
Leave the one in
app/design/frontend/CompanyName/default
empty. and make your changes inapp/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