cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2: can i skip using less css and use pure css?

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Magento 2: can i skip using less css and use pure css?

Hello,

1) I am not aware of less.css therefore my question is can i use pure css in magento 2?

2) Is it ok if i am directly making changes in css which is placed in pub static folder?

 

Please revert me ASAP.

 

Regards

Mukesh

4 REPLIES 4

Re: Magento 2: can i skip using less css and use pure css?

1) Less is a superset of CSS, so you can use CSS in a Less file.

2) No, pub/static content is autogenerated and you changes will be loss

Re: Magento 2: can i skip using less css and use pure css?

Thanks for the reply.

Can you guide me in using less css? I have number of queries in handling less files. I have read few posts about handling less but i am still in doubt to use less.

 

1) I have created a new theme so i how i will handle less files?

2) How to understand less structure?

3) How variables are used in handling different css properties?

4) can i directly add pure css in to less css?

 

It would be a great help to understand less structure.

 

Regards

Mukesh

Re: Magento 2: can i skip using less css and use pure css?

Any updates???

Re: Magento 2: can i skip using less css and use pure css?

In app/design/frontened/Custom/Theme create a directory called Magento_Theme and in Magento_Theme add another directory called layout. In the end, it'll look like app/design/frontend/Custom/Theme/Magento_Theme/layout/. Custom/Theme is whatever you call your theme.

 

In the layout directory, create a file called default.xml and add this:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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/custom.css" />
    </head>
</page>

In your theme root, create two new directories web/css and add custom.css in that folder. The full path is app/design/frontend/Custom/Theme/web/css/custom.css. You can now use the custom.css file to add plain CSS, although I do recommend you eventually learn LESS as it makes managing CSS a lot easier for bigger projects.

 

Hope that helps!