All Questions
43 questions
0
votes
1
answer
66
views
How to use Multiple custom .less files in Magento 2 using Grunt.js
We are developing a custom theme for our Front Store view so we need to use multiple .less files in web/css/source. with the help of Grunt.js, the development makes us faster than manually generating ...
0
votes
2
answers
1k
views
Magento 2 : How Can I Add custom.less File For Only Specific Page?
how can i add custom.less file for any specific page in child theme? means don't need genrate inside my custom css code in style-l.css or style-m.css and i have already 2 methods used.
Method 1.
...
- 29
0
votes
1
answer
2k
views
Magento 2 LESS - Unable to resolve the source file for ..., after deleting source file
I deleted a less file which I don't need anymore. I also removed the entry from default_head_blocks.xml so that it does not load anymore.
I searched my whole theme for main.css and removed all ...
- 3,431
1
vote
1
answer
706
views
Magento 2 - Grunt watch not detecting changes of _extend.less
I have these files:
THEME = app\design\frontend\company\base
THEME\web\css\source\lib\extend\variables\_typography.less
THEME\web\css\source\lib\extend\variables\_colors.less
THEME\web\css\source\...
- 3,431
0
votes
1
answer
977
views
Magento 2 - LiveReload is connected, but changes are only visible after manual reload
I try to use grunt watch in combination with livereload. But there is almost no documentation on the topic.
I installed livereload like this:
npm install -g livereload
Then I added the following ...
- 3,431
2
votes
4
answers
3k
views
Magento 2 - css source maps not working
I created a new theme which extends from magento luma. I try to develope with less instead of css.
I need to enable CSS Source maps, so that I can debug my less, it helps to see in which less files ...
- 3,431
2
votes
0
answers
240
views
How magento decides order of all _module.less file imported through @magento_import directive?
I am trying to add module specific less file named _module.less inside my custom module Mynamespace_Mymodule in M2.
For that I have created module.xml file with below sequence.
<module name="...
- 352
4
votes
2
answers
166
views
Create less file for custom Theme
How to create new *.less file in Magento 2.3 project ?
Here is my existing Theme:
Here is my existing less file that DOES NOT work:
Nothing is work here:
My question is how to add custom less code/...
- 551
3
votes
3
answers
7k
views
Magento 2 Theme Development - grunt watch not detecting changes of custom LESS file
We are running Magento 2 in version 2.3.1, but the error occurred in version 2.3.0 also. The situation is the following:
we've created a custom theme which has Magento/luma theme as parent.
according ...
- 31
8
votes
2
answers
952
views
Grunt compile of LESS fails with Error compiling lib/web/css/docs/source/docs.less
I'm hoping to get some advice. I pulled a project that I haven't touched in some time and in developer mode I ran 'grunt exec' followed by 'grunt less' and once running 'grunt less' I receive the ...
- 534
3
votes
0
answers
606
views
Plugins less with Magento Theme
Good morning,
I would like to know if somebody has worked with less plugins in Magento Environment?
Indeed, I met no difficulties with grunt tools, but when Magento compile all files (through setup:...
3
votes
4
answers
3k
views
Grunt, .less, and Live Reload - Can't get them working
Good afternoon,
I am having a devil of a time getting my front-end flow working. I have grunt CLI working, along with theme.js setup properly (see images below). Still, when I make changes within my {...
- 113
1
vote
1
answer
1k
views
How to install node_modules in server for grunt configuation
As a designer I am totally new to magento 2 file structure and preprocessing.
As far as my understanding is correct, magento uses less files and uses gruntfile.js for preprocessing so that via ...
- 352
2
votes
3
answers
3k
views
Error when running grunt exec
I have followed the docs for setting up Less compilation. Running grunt clean and grunt less works without errors, but when I run grunt exec (with or without appending a specific theme name) I get the ...
- 304
2
votes
1
answer
3k
views
Magento2 LESS extend/override custom theme
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 ...
- 232
1
vote
1
answer
2k
views
(Magento2) Grunt Less problem with a new theme
I've cloned the blank theme for app/design/frontend/lima/mdl, swapping Magento/blank for lima/mdl and give this error:
Processed Area: frontend, Locale: pt_BR, Theme: lima/mdl, File
type: less.
...
- 33
2
votes
0
answers
268
views
Grunt - is it possible to watch custome module less files?
I figured out how to watch less files changes inside my custome theme folder using Grunt, but is there any way how to watch less files in custome module?
Let's assume module like so:
app/code/...
- 45
0
votes
1
answer
702
views
Cannot override _forms.less
Ive tried to override the _forms.less file in my theme but its only extending the original _forms.less.
My file is placed under app/design/frontend/Vendor/Theme/web/css/source/_forms.less.
I am ...
- 201
9
votes
3
answers
2k
views
How does Magento 2 work with CSS grunt-autoprefixer
From looking at a fresh install of Magento 2 (v2.1.8) I see from their Gruntfile.js and package.json files that Magento is using grunt-autoprefixer
This is great, CSS autoprefixers are really useful. ...
- 4,923
1
vote
1
answer
114
views
How to setup grunt themes.js for my theme. Should I point to css folders of blank theme?
I don't know if I should point to the folders I have created under my theme or should I use the ones that I inherit from which is blank. I have created my own folders but they are empty. Can I import ...
- 327
0
votes
1
answer
418
views
Magento 2 - Create also symlink to .css
I have managed to successfully install Magento 2 with a downloaded theme after many hours of struggling... Now I'm facing the symlink issue.
I've installed everything, php intl extension, grunt, ...
- 623
2
votes
1
answer
1k
views
Difference between _extend.less . and _extends.less
While working on a custom theme with blank parent theme , I noticed strange behaviors:
First of all, gulp and grunt give a different output. Mostly these are parts of code in different order (on gulp'...
- 187
2
votes
0
answers
121
views
magento 2 Grunt watch loads old css when changing imported css file
When I use Grunt Watch my less compile does not work as I expect it to be.
When I work directly in my theme. less file all perfectly changes and even with livereload works absolutely great.
But ...
- 1,503
0
votes
2
answers
411
views
Proper Magento 2.1 Frontend develop flow
I am approaching Magento 2 for some projects and I am trying to setup an efficient workflow for frontend developing.
So far I followed this guide to setup a theme with a blank theme as a parent.
I ...
- 1
0
votes
1
answer
149
views
LESS w/ Grunt - Solutions For M2's Terrible LESS Workflow?
M2 has a grunt / LESS workflow that allows you to automatically compile and view your changes in the browser. However, I can rarely get the live reload to work with the Chrome extension, and when it ...
- 223
6
votes
5
answers
11k
views
How to configure the theme to use Grunt?
I normally change the file /dev/tools/grunt/configs/themes.js but in the .gitignore we can see a configuration file called /dev/tools/grunt/configs/local-themes.js I'd like to use that file instand a ...
- 13.7k
2
votes
2
answers
7k
views
Grunt less:theme fails @media-common is undefined
I am using a theme that I have created based on a third party theme 'Optimus' and I am trying to use Grunt to compile the LESS.
However, when I run grunt less:theme it fails with the following error:
...
- 361
1
vote
1
answer
559
views
Grunt themes.js file overwritten when running composer install
When running the composer install command the www/dev/tools/grunt/configs/themes.js file is being overwritten and removing the config for my custom theme. When searching online I came across the ...
- 788
2
votes
0
answers
24
views
How to add new theme name to grunt CLI command to run grunt tool in Magento 2 with CLI commands instead of editing less.js and themes.js file?
I read this , But I wanna add new theme name to grunt CLI command with some CLI commands not editing a less.js and thmemes.js manually.Is there any solution for this
something Like (magento2 add-...
- 731
5
votes
2
answers
2k
views
Grunt watch doesn't watch _theme.less and custom less file
That's my css/source file structure:
https://i.sstatic.net/5tNxJ.png
I made grunt clean, theme exec, theme less, watch.
Watch is responsive to any less file changes accept of _theme.less and local....
- 117
8
votes
1
answer
6k
views
How to enable CSS source Maps for Magento 2
How do you enable CSS source Maps for Magento 2's front-end workflow.
I'm learning M2 and have created a custom theme, called "mytheme", inheriting from the out-of-box luma theme. I'd like to use ...
- 4,923
1
vote
2
answers
2k
views
Can't get Grunt working for Magento 2
I can't get Grunt working on Magento 2. I'm going through the devdocs and have run the following commands to set up grunt:
$ sudo npm install -g grunt-cli
/usr/bin/grunt -> /usr/lib/node_modules/...
- 4,923
0
votes
1
answer
139
views
magento 2 grunt less don't see changes in few files
I have problem with Grunt watch. All works good but for example for _theme.css, but don't see any changes after I changing _extend.less what can be wrong?
- 51
2
votes
1
answer
801
views
SyntaxError: Cannot read property 'numerator' of undefined in pub\static\fron \package\theme\en_US\css\source\lib\_responsive.less
SyntaxError: Cannot read property 'numerator' of undefined in
pub\static\frontend\package\theme\en_US\css\source\lib_responsive.less
on line 44, column 9:
43 @media only screen and (max-width: ...
- 1,511
0
votes
1
answer
225
views
How I can see the native intern Magento 2 UI library?
I run the grunt documentation but I can't be able to see the docs, I saw a 404 page, why?
http://dev.local/redstore/lib/web/css/docs/index.html
- 13.7k
2
votes
1
answer
121
views
Magento 2.0.7 grunt:less problem
I'm using DigitalOcean one-click-install Magento 2.0.7 installation on ubuntu and I have installed nodejs and grunt following the official tutorials. I added my theme to /dev/tools/grunt/configs/...
- 307
0
votes
1
answer
147
views
Problem with extending Luma theme using Grunt with Less
I am trying to extend from the Luma theme in Magento 2.1 but I ran into several problems.
First of all, my theme isn’t extending properly. The templates and xml files all seem to work. My clients ...
5
votes
1
answer
992
views
How to compile gallery and calendar css with grunt?
I have put gallery.less and calendar.css in web\mage\gallery and web\mage respectively in my custom theme, But they are not compile with grunt.
How can i compile these files with grunt like other ...
- 3,035
3
votes
2
answers
742
views
Why does Magento 2 use PHP to compile less files?
What I don't understand is that since the .less files are already going to be compiled during development through Grunt, why does Magento 2 still uses oyejorge/less to compile less files through PHP?
...
- 895
3
votes
1
answer
538
views
Magento Grunt Less Compilation behaves weird
I have a custom theme Mycompany/mytheme including <Magento>/<blank> as parent.
The locale is set to de_DE.
When I execute php bin/magento setup:static-content:deploy de_DE everything ...
- 671
1
vote
2
answers
364
views
Grunt configuration Magento 2
Using the php bin/magento and deploying static content does work without throwing errors. This means that it's just having a problem getting Grunt going.
Processed Area: frontend, Locale: en_US, ...
- 560
2
votes
2
answers
9k
views
Fatal error: Unable to find Gruntfile
I have been following a few tutorials to try and get started creating a theme and workflow for Magento 2, and am trying to setup so that I can compile all my LESS files locally, as outlined here.
...
- 514
3
votes
1
answer
2k
views
See less source files in chrome dev tools
How do you see the less file that is generating the style in chrome dev tools?
working in developer mode, in less.js:
var lessOptions = {
options: {
sourceMap: true,
and in config.less....
- 6,287