The Stack Overflow podcast is back! Listen to an interview with our new CEO.

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
2
votes
1answer
23 views

Variable @button__shadow-active is undefined while running deploy static content in Magento 2

I am getting this error whenever running php bin/magento setup:static-content:deploy. It showing variable @button__shadow-active is undefined in file en_US/css/source/_extends.less in _extends.less. ...
0
votes
0answers
27 views

Override module specific styles.css using less

In my magento 2.3 installation I am using a 3rd party module that has its styles defined in <vendor>/<module>/view/frontend/web/css/styles.css. I need to override this in my custom theme ...
0
votes
0answers
16 views

Can I use Gulp + SASS on Magento 2?

I always used SASS compiled with Gulp and my current setup work perfectly in every browser that I need (IE11+). To save time I'm want to use it on Magento 2 that we are migrating at the moment. BUT ...
1
vote
2answers
39 views

CSS and LESS files are ignored in custom theme

I'm trying to customize this component: As I read from the documentation, in order to override the style of this search bar you need to create a folder called Magento_Search and add an _extend.less ...
0
votes
1answer
17 views

Magento 2 + media query syntax

I have found there is syntax for desktop devices is .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { } But i need media query for 768px to 1240px desktop ...
0
votes
0answers
20 views

Which LESS files do you compile in a child theme?

I'm trying to create a theme based on Pixtron. I'm using Gulp rather than Grunt, but everything I've read about compiling LESS files has the same instructions: you have point to the source file(s) (e....
0
votes
0answers
16 views

My checkout got a width of 1500%, how do UI library grid make sense here?

After upgrading to Magento 2.3.2 and using the latest Magento, the <div class=".opc_wrapper"> in our checkout got a width of 1500% making it ugly. We are actually using https://github.com/...
0
votes
0answers
13 views

Magento2 less modification command

Might this is basic query. I am using "Pedona magento theme" for my website, now I need very small modification in style.less /app/design/frontend/pedona/pedona_default/web/css/style.less do have to ...
0
votes
1answer
73 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
20 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
31 views

M2 css/less priorities

CCS styles in M2 locates in two CSS files: style-m and style-l. I should use & when (@media-common = true) mixin to put styles just to style- m and they will work for both mobile and deskop ...
0
votes
0answers
26 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
27 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 ...
0
votes
0answers
26 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
96 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
85 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
24 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/...
0
votes
0answers
21 views

Get a list of added CSS files

I'm doing some optimizations to a few sites and I was wondering if it's possible to get a list of all CSS/Less files loaded in the head of the site. I'd like the list in Array or Collection form so I ...
1
vote
0answers
40 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
15 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) { ... } //...
0
votes
1answer
474 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
23 views

magento 2 override style for custom theme

I am trying to override file .less. The file, in the parent theme, is at vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/_module.less So I copied and edited the file at: app/...
0
votes
0answers
21 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
0answers
17 views

How to create symlinks to all source files after changing git branch?

I am working in git workflow. I want to know how I can create symlinks to source files after changing git branch? Let's say I have three root source files in my theme that are located as below. app\...
0
votes
2answers
33 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
42 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
124 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
186 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
56 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
0answers
44 views

Grunt Causing High CPU Usage

I Have installed Grunt on server. When I hit URL after less files changed the CPU Usage goes up-to 99-100%. The server is Linux. The changes gets reflected correctly. The issue which comes after first ...
0
votes
2answers
59 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
78 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
115 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
5answers
4k 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 ...
7
votes
2answers
371 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
260 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
50 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
42 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
161 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
108 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
375 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
100 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
233 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
0answers
104 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
70 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
92 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
139 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
301 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/...
1
vote
2answers
427 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 ...
2
votes
4answers
781 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 {...