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
1 answer
20 views

How to use theme's _variables.less file in my custom code module?

I have written a custom module that is located in the /app/code folder. My less file is located in /app/code/<Vendor>/<Module>/view/frontend/web/css/source/_module.less. How do I include ...
user avatar
0 votes
1 answer
28 views

How to add .less css files in custom theme magento 2

I want to add the custom.less file in my custom theme which i want to develop from scratch. so, anyone have an idea then please share with me.
user avatar
  • 473
0 votes
0 answers
7 views

ERROR Compiling Weltpixel CSS

this issue come when i want run this command in my local php bin/magento weltpixel:css:generate --store=default for generating my welt css file but the error message is in this picture can someone ...
user avatar
0 votes
0 answers
6 views

How to make overflow: visible for Font icon variables

How to make overflow: visible in less for font icon I use this mixin to add a font to any element .wishlist { .lib-icon-font( @_icon-wishlist, @_icon-font-size: 24px, @...
user avatar
0 votes
0 answers
19 views

Magento 2 MGS Claue with Amasty Checkout

I'm trying to hook Amasty Onestep Checkout to the MGS Claue template and I got a few questions. First of all, when deploying console throws: Compilation from source: /var/www/html/magento/vendor/...
user avatar
  • 1
0 votes
0 answers
13 views

Grunt Livereload to reload just the styles

Added "grunt-contrib-livereload": "^0.1.2" to sass compile grunt config. Yes, it's reloading, but whole DOM. Magento 2 native config reloader reloading just the styles, not page ...
user avatar
  • 87
0 votes
0 answers
70 views

Change the default max-width of page builder content from 1280px

I am struggling to work out where to change the max-width of any content that is inserted with the page builder... It is defined like so:- [data-content-type='row'][data-appearance='contained'] { ...
user avatar
  • 1,755
0 votes
1 answer
71 views

How to create _extend_child.less for grand children theme

I am new to Magento 2. I am having difficulty in creating a child theme. However I have created the child theme now I am facing how to add source for child them. In my configuration, I have created ...
user avatar
1 vote
1 answer
337 views

Magento 2 : How to Import Custom Module's Less file in Custom Theme

I am creating custom theme without parent. Now, I want to add custom less file inside Magento_Theme folder. File path : app/design/frontend/VendorName/ThemeName/Magento_Theme/web/css/source/_mycustom....
user avatar
0 votes
0 answers
70 views

Magento 2 - magento media query mixin not working

I try to add this code to my style. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) { .foobar { background: red; } } I compiled it successfully with grunt, ...
user avatar
  • 2,402
0 votes
0 answers
26 views

Magento 2 - Size of styles

I'm asking myself about performance on Magento 2 websites. Indeed, Google says to me that 95% of my styles-m or l files are unused on homepage. That's a normal behavior, I suppose, it's the aim of the ...
user avatar
0 votes
0 answers
28 views

Magento 2 - How to completly override a core .less file?

I need to completly replace this .less file from magento 2 core with my own file: vendor\magento\module-page-builder\view\frontend\web\css\source\content-type\button-item\_default.less but I can't ...
user avatar
  • 2,402
0 votes
1 answer
71 views

styles-m.css and styles-l.css link tags missing from head

Suddenly the css files stopped being loaded on my site. I found they are no longer being rendered in the <head>. Normally they would look like: <link rel="stylesheet" type="...
user avatar
0 votes
2 answers
77 views

Remove a style from style-m

this style is causing an issue with my mobile menu. .navigation .submenu:not(:first-child).expanded { display: block !Important; } I have tried to overwrite it but it still appears as a ...
user avatar
  • 47
0 votes
0 answers
68 views

CSS color variable override not working

I have created a child theme using LUMA as parent. Although many of the variables I have updated in my /theme_name/web/css/source/_extend.less file seem to work correctly I have now noticed that I can'...
user avatar
0 votes
1 answer
71 views

Magento 2.4.2, child theme of Blank - Front end. How do you remove properties in parent Blank theme styles, for example footer border?

The file I use to override these styles: app/design/frontend/Vendor/ChildTheme/web/css/source/_module.less as per M2 documentation. I tracked that it applies my modified styles, but then goes and puts ...
user avatar
  • 11
0 votes
1 answer
54 views

Magento 2.4 Commerce cloud - After push the code from dev to live server less not compiled to css file

I have created a custom theme, for the listing page i have created custom less file, app\design\frontend\Zero\my_theme\Magento_Catalog\web\css\source\ _custom_listing_page.less On the Website listing ...
user avatar
  • 103
0 votes
1 answer
336 views

Magento 2 - Why do I get stupid "compilation from source" errors on setup:static-content:deploy?

If I execute php bin/magento setup:static-content:deploy then I get alot of errors like: Compilation from source: /home/company/staging.company.de/app/design/frontend/company/fresh/web/css/source/...
user avatar
  • 2,402
1 vote
1 answer
129 views

M2 - Best practice for adding custom less file in Custom Theme for CMS Static Block

I just created custom theme, i have followed a number of guides to properly setting up .less files in a custom theme and nothing seems to be working. Where should i place less file for cms custom ...
user avatar
  • 103
1 vote
1 answer
54 views

M2 - How to include custom theme directory less file path into my CMS block?

I have created custom theme which is inherit from blank theme, I have created more than one CMS block and include into CMS page for home page design. One of my CMS block named service banner In the ...
user avatar
  • 103
0 votes
1 answer
559 views

Magento 2: Add CSS / JS to custom layout - only applied to single page

I have a custom page layout for Home Page. I created this custom layout this way: app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml <?xml version="1.0" encoding="UTF-8&...
user avatar
0 votes
3 answers
171 views

Less file styles not applying in Magento 2

I have custom theme in ..../design/frontend/MyVendor/my-theme folder. My main less file is in design/frontend/MyVendor/my-theme/web/css/my-main.less. Content of the main less file: @import './source/...
user avatar
0 votes
1 answer
200 views

How to enable Dark Mode using Less

I'd like to enable the Dark Mode in Magento 2. Using plain CSS I know it easily achieved by doing: @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } ....
user avatar
  • 115
0 votes
2 answers
194 views

Change Add to Cart button in Luma 2 child theme on Magento 2

I have Magento 2.4.1 installed with a custom theme. I have a _theme.less file (themeDir\web\css\source_theme.less), where I changed the button color to: @button-primary__active__background: @color-...
user avatar
1 vote
1 answer
80 views

Module LESS results are different depending on use of grunt or setup:static-content:deploy

I am tying to break up my CSS, in a rather big module, so that it is easier to find the CSS I need. I have done something like the following in my _module.less: @import "module/_first-less";...
user avatar
  • 98
1 vote
0 answers
21 views

Adding values dynaamically in less files

I have created a theme and had configuration for the colours and background configuration in backend. I want those values to be replaced in the less file.Can it be achieved.If so please guide me to ...
user avatar
  • 718
2 votes
0 answers
51 views

Css compilation issue on server

My styles are not working with bin/magento setup:static-content:deploy. It is working only after running grunt commands. Due to this my code is not working in server. we are using Magento 2.3.5-p2.
user avatar
2 votes
1 answer
57 views

It is possible to deploy only one file using deploy command?

In production mode when I change the design of some particular block or page then I am only working on one or two files like js and CSS. To apply that one change I need to deploy the whole theme. Can ...
user avatar
0 votes
1 answer
122 views

How do I override a value from a magento 2 lib LESS mixin?

I have created my own theme using Blank Theme as it's base. In my theme, I have a file in web/css/source/_navigation.less As I understand, this file calls a mixin. .lib-main-navigation();which pulls ...
user avatar
  • 87
1 vote
2 answers
218 views

Update styling magento 2 in production mode

I have a server with a production install of magento. When I deploy a new version, adding for example a new .less file, the new markup doesn't get loaded. I cleared the cache, rebuild the static-...
user avatar
1 vote
1 answer
543 views

Magento 2 - use LESS variables in custom LESS file

I added bootstrap 4 to my site, but it overwrites many magento 2 core css. So I added a new file THEME\web\css\bootstrap.less where I try to fix these problems, and added it to my THEME\Magento_Theme\...
user avatar
  • 2,402
1 vote
2 answers
326 views

Magento 2 - Override luma themes module less file

I try to override css code from the file vendor\magento\theme-frontend-luma\Magento_Checkout\web\css\source\module\_cart.less: .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @...
user avatar
  • 2,402
0 votes
1 answer
151 views

Magento 2 - Compilation from source, errors during `php bin/magento setup:static-content:deploy`

I get this error when I execute php bin/magento setup:static-content:deploy: Compilation from source: /app/design/frontend/company/fresh/web/css/source/lib/extend/amasty/mega-menu/header.less variable ...
user avatar
  • 2,402
2 votes
0 answers
112 views

Recommended LESS Linter for Magento2

Is there a recommended tool for linting LESS code in Magento2? Interestingly, ESLint Rules are provided for Javascript linting, but when it comes to LESS, all they seem to provide is a coding standard....
user avatar
  • 1,366
0 votes
1 answer
52 views

How to add ttf file in less using typography.less file?

I want to call .ttf file instead of .woff2 file in typography.less. But, it's not call and return 404 error. Code : .lib-font-face( @family-name: @roboregular, @font-path: '@{baseDir}...
user avatar
1 vote
0 answers
147 views

Missing cached stylesheet for Magento 2 Theme

We are using the free HiddenTechies theme "Bizkick" for our Magento 2 store and we are having an issue with a missing stylesheet. On the front page, the theme is displaying correctly except for two ...
user avatar
1 vote
1 answer
729 views

How to get pub media url in .less file?

I have an image that i need to use in .less file, the image is located in: pub/media/kool/setting/blank.gif in the .less files i tried to define it like this: @footer_bg_file:~"../kool/setting/...
user avatar
  • 167
1 vote
1 answer
51 views

Adding CSS to child themes _extend.less has no effect

I have set up a child theme of Luma and can see it is being loaded by looking at the page source in the browser. I now want to customise the styling of the theme. I followed the instructions here: ...
user avatar
  • 113
0 votes
1 answer
3k views

Issue deploying Magento 2: Unable to get content

During deploy we get issues: Deploy using quick strategy frontend/Magento/blank/en_US 0/2437 >-------------------frontend/Magento/blank/en_US 2/2437 &...
user avatar
  • 2,052
0 votes
2 answers
49 views

CSS and LESS, what is the correct way for including them in a Magento 2 module?

Let's say I have my module which adds a slider to the homepage and there are many styles to define. I know I can add the styles in 2 different ways: Adding a css file MyBrand/MyModule/view/frontend/...
user avatar
  • 652
0 votes
1 answer
41 views

How do you know what CSS name an element is to override it

If I see an element such as this in the code, how do I work out what to put in my less file to override the CSS used on it? button id="bundle-slide" class="action primary customize" type="button" I ...
user avatar
0 votes
2 answers
129 views

Can i import theme variables to custom less file?

I want to add a variable that located in "web/css/source/_theme.less" to my custom less file, that I created specialy for home page. I added my less file in "Magento_CMS/layout/cms_index_index.xml" &...
user avatar
0 votes
1 answer
763 views

@baseDir variable not working in less file for background-image. Says undefined

Several other questions/answers here say to use the variable @{baseDir} to get the URL for background-image. I added this to my themes less file, however, when I compile, it crashes. variable @...
user avatar
0 votes
2 answers
75 views

Magento 2 - When to use the parameter `@_prefix: 1` when calling mixin .lib-css()?

I wonder when I need to use the parameter @_prefix: 1 with .lib-css() I always use it with the css transform property .lib-css(transform, scale(0.65), @_prefix: 1); so that it generates this code: ...
user avatar
  • 2,402
0 votes
1 answer
703 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 ...
user avatar
  • 2,402
0 votes
1 answer
137 views

Magento 2 - Find LESS version

How can I figure out the version of LESS used by Magento 2? I need it for a bug report.
user avatar
  • 2,402
1 vote
1 answer
161 views

How to use .abs- (from abstract) from UI library LESS?

Magento Documentation for UI Library has said to use "Extend class names should have prefix .abs- (from abstract)" There is no other explanation for the usage in the documentation How should we use ...
user avatar
  • 661
0 votes
1 answer
691 views

Magento 2 - How to override LESS code from _extends.less?

I try to remove the box-shadow of a button in the customer area. I found the code in vendor\magento\theme-frontend-luma\web\css\source\_extends.less: // // Secondary button // -------------------...
user avatar
  • 2,402
1 vote
2 answers
502 views

Magento 2 - Where to find LESS Mixin definition?

In the file vendor\magento\theme-frontend-luma\web\css\source_breadcrumbs.less there is this code getting called: & when (@media-common = true) { .breadcrumbs { .lib-breadcrumbs(); ...
user avatar
  • 2,402
0 votes
2 answers
2k views

Magento 2 - Change font-size of element with LESS

I try to change the font-size of the element with class box-content in the customer area from 1.6rem to 1rem. As you can see it shows that this is defined in _module.less Line #406 : // // Desktop //...
user avatar
  • 2,402

1
2 3 4 5 6