How to add CSS or LESS file in custom theme of Magento2

What Is LESS and Why Use It?

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, extendible and as per your theme.

You can learn LESS form here.

We use it as it allows us to use variables, mixins, functions and mathematical operations for creating our CSS files.

 

How to use It in Magento 2.0?

The Best Practice to use the LESS is to Create a new theme, which inherits from the Blank theme as it saves your time and creates an easier experience for developers and designers.

 

Where are the files in the Blank Theme?

  • You can find the file at this location /app/design/frontend/Magento/blank/web/css/_styles.less
  • now further enter the “/source” directory: here you will find the set of LESS files which are imported to the _style.less using the @import command.
  • The _styles.less has the following files included:@import ‘source/lib/_lib.less’; // Global lib@import ‘source/_sources.less’; // Theme styles@import ‘source/_components.less’; // Components styles (modal/sliding panel)

 

Understanding default structure

  • First Let’s start with the source directory /app/design/frontend/Magento/blank/web/css/source/. This consists of various .less files and all the .less files are imported to the _sources.less file.
  • Now come back to the css directory /app/design/frontend/Magento/blank/web/css/. Here You will find the _styles.less file which has the _sources.less imported into it.

The Journey From .LESS file To CSS file in Magento 2.0 ?

  • The easiest way to understand the concept behind .LESS file is :
    It is a dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
  • It allows you to make CSS that is more maintainable, theme-able and extendible.
  • In order to Compile your .less files in Magento 2.0 you need to use compilers like Grunt.
  • Magento 2.0 has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:
  • You can find the details about “Installing and configuring Grunt” here : https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html 

 

Let’s understand in detail how Magento2 processes css. Also go though steps of including new css in the custom theme of Magento2.

If you want to include .less files in your theme then you can do it by the following steps:

First of all, you need to add your file. So for this you just need to add the simple css file from the following location,

app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml

<?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/custom.css" rel="stylesheet" type="text/css" />
       <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" rel="stylesheet" type="text/css" />
    </head>
</page>

 

Now you will be thinking that the blog is for including .less files so why we are including .css files. So, the answer is Magento’s built in LESS preprocessing system.

To include an external CSS file, add <css src="URL to External Source" src_type="url" rel="stylesheet" type="text/css" />.

o include a CSS file, add the <css src="<path>/<file>" media="print|<option>"/> block in <head> section in a layout file. <path> is specified relative to the theme web directory (<theme_dir>/web)

For example, to include <theme_dir>/web/css/custom.css:

This way we will be adding a reference to a new stylesheet named custom.css that we have inside the web/css directory of our theme.

LESS preprocessing system:-

Whenever we add any css file in the layouts, LESS preprocessor does the following:

  1. Checks if the requested .css file is found. If it is found, the preprocessor stops its execution. Otherwise, it proceeds to the next step.
  2. Changes the extension of the requested file to .less and tries to find the file using the Magento fall-back mechanism. If the .less file is not found, LESS preprocessor stops its execution. Otherwise, it proceeds to the next step.
  3. Reads .less file contents and resolves @magento_import and default LESS @import directives.
  4. Resolves all paths in .less files to relative paths in the system using the Magento fall-back mechanism. All files resolved by the LESS preprocessor are copied to var/view_preprocessed/less. Imported files are processed recursively.
  5. All source files are passed to the PHP LESS compiler. The resulting compiled .css files are published to pub/static/frontend/<Vendor>/<theme>/<locale>.

You just need to add the file with .less extension. It will be added and preprocessed by Magento when you deploy the static content.

Here we would like to clear out one confusion that Magento 2.0 supports both: normal Css files and LESS. You can either use LESS to simplify the management of complex CSS files or can directly include a css file and write your css upfront. But using LESS is suggested more, as otherwise you are not using one of the many benefits of Magento 2.

 

LESS in Magento 2

Magento 2 supports LESS, a CSS per-processor that simplifies the management of complex CSS files. To define styles of a Magento store, you can use both – CSS and LESS style sheets.

Magento 2 application provides a built-in LESS UI library, which you can optionally extend.

To customize store-front styles, you need to create a custom design theme. Then you can use one of the following approaches:

  • If your theme inherits from the Magento out-of-the-box Blank or Luma theme, you can override the default LESS files; for example, to change the values of the variables used in the default files. The Whole Magento UI library is located in lib/web/css and .less library files are imported in one _lib.less file using the @import command.
  • Create your own LESS files using the built-in LESS per-processor.
  • Create your own CSS files, optionally having compiled them using third-party CSS per-processor.

Where Magento stylesheet files are organized ?

Conventionally, CSS and LESS files are stored only in themes. Module directories do not contain any default styles.

web/css/source– this subcatalog contains the LESS configuration files that trigger mixins from Magento UI library

  • web/css/source/_theme.less – overrides the default Magento UI library variables values.
  • web/css/_styles.less – this is a composite file that includes all LESS files that are used in the theme. The underscore (“_”) in the file name usually means that the file isn’t used separately, but as a part of other files.
  • web/css/print.less – this file is used to generate styles for the printed version of saved pages.
  • web/css/email.less – this file is used to generate email styles.
  • web/css/styles-l.less – it’s used to generate desktop-specific styles using _styles.less.
  • web/css/styles-m.less – it’s used to generate mobile styles including _styles.less.

How Will You Generate a Custom Css using less?

We have already told you how you will add a custom css to your theme, now how will a custom css generate from a less file and to do this we would like to demonstrate it through an example:

Step 1: Include a Css file for your custom changes and name it any thing according to your requirement, for example we name it: custom.css

Step 2: Now inside your theme under web/css/ create a file names custom.less i.e. web/css/custom.less

Step 3 : Now inside the  web/css/ and parallel to the custom.less create a custom directory which will contain different files in which you have made your custom changes according your theme and even those files which you need to create new, this can contain as many files as you require to make your changes.

It should look like: web/css/custom/_anyfile.less

For Example:

If you need to declare new sets of variables and also make some specific changes to the header section you can create the files like:
_variables.less
_header.less

Step 4 : And now you can import your files into your custom.less using @import
Example: 

@import “custom/_variables.less”;

@import “custom/_header.less”;

Step 5: And now when you compile your less file you will find that all the codes from different files onside the custom directory have sampled down into one single file which is custom.css

 

Compiling Your Theme Files

If You have .less files in your theme, then you have to compile those files to generate the corresponding .css files. You can do it via multiple ways like using grunt etc. But we’ll tell you the most common and easiest way which is by “Static Content Deploy“. Whenever you make changes in your .less file then you have to flush the existing static content of your theme, which resides at the following location:

>><your Magento install dir>/pub/static/frontend/<vendor>/<theme>/

You have to delete all the content inside this directory.

Also delete the files present in the <your Magento install dir>/var/view_preprocessed/

The clear the cache:-

>>php bin/magento cache:flush

Then Deploy the static content by using following command:

>>php bin/magento setup:static-content:deploy

Once you deploy your static content then your .less file will be compiled at the following location:

><your Magento install dir>/pub/static/frontend/<vendor>/<theme>/<locale>/css

>><your Magento install dir>/var/view_preprocessed/

Both the files i.e. complied .less file as well as its corresponding .css file will be created inside that directory.

NOTE: Every time you make changes in your .less file then you have to repeat the whole process.

With this we come to the end of custom theme creation in Magento 2. Please share your reviews and suggestions regarding this blog. We would be happy to hear from you.

 

Reference Links

For more details please visit the given links:

https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/bk-frontend-dev-guide.html

https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

 

Related Posts:

Comments (0)