4

I have an eCommerce HTML template with simple CSS. I have a few queries before converting HTML into Magento 2.3.3

Question 1: Is a .less file is mandatory? Can we use a simple CSS file in Magento 2?

Question 2: I don't want to @import variable & import Less file in another Less file. So Could someone, please tell me the better approach to use HTML Template/CSS

Question 3: Why Magento 2.x use Less CSS? I have worked in Magento 1.9 there is no concept of Less & it uses simple CSS & that was very easy to change the color scheme of page design.

This is my first question in the Magento stack community, Hope someone will give a pertinent answer. Thanks in advance :)

Updated Question on 13 Oct 2020

How to convert CSS into Less if the project has using CSS?

Improve this question

2 Answers 2

Reset to default
1
  1. its not mandatory, you can add any plain CSS file you want/need.

There is a layout file called default_head_blocks.xml You can add as many css files via the css elements as you need

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/fontawesome/css/all.css" />
        <css src="css/example/css/all.css" />
        <css src="css/example2/css/all.css" />
    </head>
</page>
  1. You are not forced to use the imports, but you are missing out on a lot of advantages which come with it.

3. because many developers wanted to use something with more features. The concept of using variables makes it a lot easier to change the whole representation without needing to go with search/replace over all the css files. And as a module provider you can easily reuse central configured colors, fonts, paddings... So your module directly aligns with the existing design without the need to get modified. Additionally Magento makes use of certain rules, to optimize the loaded css depending on the Viewport size, so it does not load all the Big screen CSS for mobile. The reality is, many big projects, and many experienced developers use one of less, sass, scss and they already did it in Magento1, just without having a standard there and without having modules being able to take advantage of it.

Improve this answer
-1

  1. Less is a good approach to use in HTML templates.

  2. With the help of import variable in less file is easy to change all color of the theme.

  3. For the compilation of all less files so that the site can be faster.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.