Questions tagged [less]

Less is an open-source stylesheet preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. For the UNIX command, use [less-unix].

Filter by
Sorted by
Tagged with
0
votes
1answer
480 views

Operation on an invalid type in _typography.less in _utilities.less in _listings.less

Updated to Magento 2.3.2 yesterday and have noticed that the CSS for css/styles-m.css is failing to generate with the below error: Operation on an invalid type in _typography.less in _utilities.less ...
0
votes
1answer
64 views

Magento 2 Component less/css editing best practices

Please help to understand below 2: 1. How to override component css using less files? 2. Is anyone can provide some of examples to write css in _extend.less file.
0
votes
0answers
28 views

How to edit .less or css files

I like to change some styles in my website, so i edited .less and CSS files for example: app/design/frontend/Templatemonster/theme/web/css/styles-l.less I used "flush Magento cache" from backend ...
1
vote
0answers
28 views

Which css format is best for Magento 2 theme?

I am aware that Magento 2 uses Less CSS Format, I have just one daught what if I am use Sass CSS? Can anyone please answer below questions. What if I am using a simple CSS format? What are the ...
1
vote
0answers
54 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="...
1
vote
3answers
527 views

Magento 2: How to override theme LESS styles within custom module

I am running Magento 2.3 on Ubuntu 18.04 server with Apache 2.4, MariaDB and PHP 7.2. Magento is running in developer mode. I have created a custom theme which inherits from the Magento/blank theme. ...
4
votes
2answers
101 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/...
1
vote
0answers
65 views

How to edit responsive.less file in theme magento 2?

I setup unero theme which has responsive.less file in the dire web/css/responsive.less. I need to edit this file. first I took a copy of that file and past it to my theme dire which is app/design/...
1
vote
0answers
54 views

Magento 2.3 Client Side less compilation static files not found

if I enable the Client side less compilation and flush the static file cache I will get 404 Errors for all files in the media and pub/static direction. I'm using nginx. If I compile the files manual ...
1
vote
0answers
18 views

Magento2 CSS groups in styles-m.css in wrong order

my themes "_extend.less" file looks like this: //common & when (@media-common = true) { ... } //mobile .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { ... } //...
2
votes
2answers
2k 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 ...
0
votes
0answers
38 views

How to add custom less file for particular page (product listing page)

I am building a custom theme in Magento and Luma theme is my parent theme. I am trying to customize the product listing page with my own style. Here is what I did I copied list.phtml from module ...
0
votes
2answers
50 views

Magento 2 image not found

I'm writing a callback module and when i try to insert image like following: a#popup-button{ display: block; width: 50px; height: 50px; background: url("../...
0
votes
1answer
60 views

Keep getting <style> for css file and not actual file - trying to use Gulp sourcemaps

So I have updated the default_head_blocks.xml file with my css file like so and the theme loads the CSS. <css src="css/master.css" /> This is my gulpfile. const gulp = require("gulp"); const ...
0
votes
1answer
246 views

Magento 2 Load _extend.less last

I am using a custom theme and then a child theme for the custom theme. I believe the easiest way to overide the themes css is to use _extend.less in the <MYCOMPANY>/<MYTHEME>/web/css/...
0
votes
2answers
718 views

Magento 2 change colours

I am trying to change the colours from the standard Magento 2 blank theme via the _theme.less file. I currently have the following file structure /public_html/app/design/frontend/GladiatorFitness/...
0
votes
1answer
107 views

Show “View as” in toolbar before grid and list modes

I want to show "View as" in toolbar just before grid and list modes. I found its already exist in template file but is hidden: vendor/magento/module-catalog/view/frontend/templates/product/list/...
0
votes
2answers
100 views

CSS are compiled but not called in frontend

I added css on my website. One is bootstrap and one is a custom css. I addedd it on my Magento_Theme folder (inside layout/default_head_block.xml) <css src="css/bootstrap/css/bootstrap.css" order="...
0
votes
1answer
88 views

change the default magento image background white color to diffrent color

Am attaching the screenshot , want to change image background color. https://prnt.sc/m2fvyp
0
votes
1answer
221 views

custom less not working in magento 2 production mode

I've a less file inside app/design/frontend//web/css/source/_test.less and included in default.xml like <head> <css src="css/source/_test.css" /> </head> It's working perfectly ...
5
votes
6answers
11k views

Magento 2 less compilation error while setup:static-content:deploy

After updating to Magento 2.1.16 on my staging server with nginx server and php7.0 I am facing issue in compiling less and css files. The files styles-l.css and styles-m.css are missing - not ...
8
votes
2answers
547 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 ...
1
vote
1answer
456 views

Magento 2.2.5 styles-m.css and styles-l.css not load

I'm working with new project and editing front-end css (working with less files), everything goes well but suddenly styles-m.css and styles-l.css in front-end not loading. Any ideas why this happened ...
0
votes
0answers
161 views

Magento 2: Cannot change less variables

I have a problem with a custom theme in Magento. I am trying to change some variables for less. But nothing that i change has any effect on the output css. I followed https://devdocs.magento.com/...
0
votes
1answer
69 views

Magento 2 - Custom style _listings.less not working

We are using Porto theme. We have our product list with the style: <div class="product details product-item-details"> code </div> We checked the porto .less which corresponds to: app\...
0
votes
1answer
433 views

How to include LESS in specific page layout

I have created my custom page_layout in magento 2 and now I want to add some less only in my page_layout. I don't want to load those less file in other layouts. How I can achieve it?
1
vote
0answers
181 views

Magento2 : How to create custom less file in magento 2 for particular store?

In Magento2, how to create custom.less file for a particular store ? i created custom themes like theme1, theme2 and theme3 in magento2 and also i created custom.less file only in theme but when i ...
1
vote
1answer
546 views

How to set different css files for each store in custom module

I created a module which is changing some of the behaviours on the bundle product. I also need to create some CSS and I did create a file and attach in a layout by doing this: <css src="...
1
vote
1answer
187 views

::after behaviour with lib-css

Trying to get to know how less work or better lib-css in partnership with it. I have all styles generated on different element ending with :after going down to the same line of the _icon.less that ...
0
votes
2answers
423 views

Debug css in Magento 2

I read the page: https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html And I am trying to see the code from the less file rather than the css so that I can debug the ...
1
vote
1answer
168 views

Magento 2 Autoprefixer in production mode

Magento 2 comes with a preinstalled autoprefixer for Grunt. But is it possible to use the autoprefixer in the production mode too? I have a lot of CSS which does not work without the vendor prefixes ...
0
votes
1answer
131 views

Add page specific CSS to 1 single page in Magento 2.2.2?

I have 1 specific page in Magento 2.2.2, that I'd like CSS on. In my _extend.less file, if I include the CSS there, it'll effect other pages that have the same classes. I don't want that to happen. ...
2
votes
0answers
185 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:...
0
votes
1answer
214 views

Gulp Not working with Magento2

unfortunately I am new to Gulp, and I really need it to debug and sourcemapping, so to better understand less too, which is also quite new for me. Anyway everything in place, I deploy trough usual ...
0
votes
2answers
520 views

Magento 2.2: How to apply breakpoints in custom .less files

Magento 2.2.3 Ubuntu 16.04 Server VM using VirtualBox with icewm window manager Apache 2.4 MySQL 14.14 PHP 7.0 Custom theme which inherits from Magento/blank I have a custom .phtml file: Vendor/...
2
votes
2answers
716 views

Include and compile custom.less file after removing the style-l and style-m css

I am new in magneto2. I am working on LUMA theme and I have to customize it. So my approach is that I am removing all the existing i.e. style-l.css and style-m.css by writing code in the ...
3
votes
4answers
1k 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 {...
0
votes
2answers
35 views

What are the benefits of modularized styling?

What are the benefits of modularized styling? For example, I'm using app/design/frontend/<vendor>/<theme>/web/css/source/_extend.less For all of my styling. However, the Magento Dev ...
1
vote
1answer
494 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 ...
1
vote
1answer
304 views

Multiple themes in Magento 2.2 that extend off of each other?

I've created a theme at: app/design/frontend/<vendor>/default That I call my "default" theme with some base styles, that inherit from Magento Blank as it's parent. Default just has universal ...
1
vote
1answer
181 views

Is there a way to order the CSS assets in Magento 2.2? [duplicate]

Is there a way to order the CSS assets in Magento 2.2? I want to include https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css Bootstrap's CSS before styles-m and styles-l css ...
1
vote
1answer
2k views

Magento 2: Font family does not change. How to troubleshoot?

I created a child theme that inherits from theme X that in turn inherits from Magento Luma Theme. Hence, Theme inheritance is as follows: Magento Blank <- Magento Luma <- Theme X <- My Theme ...
2
votes
1answer
494 views

How to override CSS of module via LESS?

I want to modify all css files in path: app/code/Aheadworks/Autorelated/view/frontend/web/css What is the best way to do it?
1
vote
2answers
1k 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 ...
1
vote
0answers
331 views

Change default Magento 2 theme to use a boxed layout instead of full width?

Change default Magento 2 theme to use a boxed layout instead of full width? I'd like to change my Magento 2 theme to use a boxed layout instead of a full layout. I've already started customizing the ...
5
votes
2answers
4k views

Magento 2.2 LESS not compiling locally on Ubuntu

I'm using Ubuntu with Magento 2.2 installed locally for development. I'm updating my LESS, but it's just not compiling for some reason. I have all caching turned off in Cache Management, and I run ...
2
votes
1answer
2k 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 ...
0
votes
1answer
27 views

How do I get Magento2 to process my _theme.less?

I can't figure out how to get the LESS files in my theme to update. I've tried every different .less file the docs recommend. I've tried copying this file from samples: https://github.com/magento/...
2
votes
1answer
484 views

What are the required skills to work on Magento 2 Front-end?

I am a fresh front-end developer and I want to start working with Magento 2. I would like to know what are the required skills to start working on the Luma theme as a first step? With what grid is ...
1
vote
0answers
708 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. ...