Webpack2 and Less tutorial

When we write a large number of css in a project, we will have the following problems: too many repetitive rules, too much dependence on the editor for finding, locating and modifying, too much trouble for replacing and modifying, and so on. Based on such problems, we can use css preprocessors, such as Less, Sass, Stylus and PostCSS, to make the code more organized and easy to maintain

The css preprocessor can bring us the following benefits:

Variables - define commonly used variables
Calculation - Calculation of realized value
Mixed - code reuse or inheritance
Functions - powerful functions to manipulate properties and values

Compile the css pre file into css file through the preprocessor, maintain and develop the pre file directly, and solve the past development pain points

Let's take Less as an example to briefly introduce the usage and some skills of this css preprocessor

The tutorial uses webpack as the construction tool and works with react. Let's make do with it~

Install Less

Installation via NPM

 npm install less -g

Installed via Yarn

 yarn add less -g

Then you can use the lessc command on the terminal to compile the written less file into a css file, as follows

 lessc styles.less > styles.css

Combined with webpack2

Suppose you have installed webpack2 and webpack dev server, and then you need to install some loaders first, as follows

 yarn add less less-loader css-loader style-loader --dev

Style Tag Inline

to configure webpack.config.js

 module.exports = { module: { rules: [ { test: /\. (less|css)$/, use:[ 'style-loader','css-loader','less-loader'], }, ], }, };

This will automatically parse css and less, and how to put them in the head style , style loader is responsible for the generation of style tags

Style tag outreach

If we want to put it in a style.css file, how can we do it? as follows

Install plug-ins first

 yarn add extract-text-webpack-plugin --dev

Then modify the configuration webpack.config.js by

 const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { rules: [ { test: /\. (less|css)$/, use: ExtractTextPlugin.extract({ use:[ 'css-loader','less-loader'], fallback: 'style-loader', }), }, ], }, plugins: [ new ExtractTextPlugin({ filename: 'index.css', disable: false, allChunks: true, }), ], };

Support CSS Modules

what? You want it to support CSS Modules

Modify Configuration webpack.config.js by

 module: { rules: [ { test: /\. (less|css)$/, use: ExtractTextPlugin.extract({ use:[ { loader: 'css-loader', options:{ modules:true, importLoaders:1, localIdentName:'[local]_[hash:base64:5]', } }, { loader:'less-loader', }, ], fallback: 'style-loader', }), }, ], },

In fact, this step has already involved some contents of CSS Modules. First, omit them, and then decompose them

Less use learning

Variables

Less allows us to create variables like standard programming languages, so that we can store our commonly used attribute values in the same place, such as color, size, selector, font, URL, etc. As shown below

Less:

 @background-color: #eee; @text-color: #333; p{ background-color: @background-color; color: @text-color; padding: 15px; }

CSS:

 p{ background-color: #eee; color: #333; padding: 15px; }

Mixins

Less allows us to directly apply the existing class or id style to other selectors, mainly in two ways

Less:

 #circle{ background-color: #4CAF50; border-radius: 100%; } #small-circle{ width: 50px; height: 50px; #circle }

CSS:

 #circle { background-color: #4CAF50; border-radius: 100%; } #small-circle { width: 50px; height: 50px; background-color: #4CAF50; border-radius: 100%; }

If we don't want the selected style to appear separately, then

Less:

 #circle(){ background-color: #4CAF50; border-radius: 100%; } #small-circle{ width: 50px; height: 50px; #circle }

CSS:

 #small-circle { width: 50px; height: 50px; background-color: #4CAF50; border-radius: 100%; }

Did you notice the difference? The former is #circle , the latter is #circle()

Nesting and Scope

This part should be used most. Nesting various selectors

Less:

 ul{ background-color: #03A9F4; padding: 10px; list-style: none; li{ background-color: #fff; border-radius: 3px; margin: 10px 0; } }

CSS:

 ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { background-color: #fff; border-radius: 3px; margin: 10px 0; }

In addition, the declaration of other values in the selector field used by the variable will affect the value of the variable in the nested selector

Less:

 @text-color: #000000; ul{ @text-color: #fff; background-color: #03A9F4; padding: 10px; list-style: none; li{ color: @text-color; border-radius: 3px; margin: 10px 0; } }

CSS:

 ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { color: #fff; border-radius: 3px; margin: 10px 0; }

Operations

We can also use mathematical calculation to do some numerical or color calculation. See the following example

Less:

 @div-width: 100px; @color: #03A9F4; #left{ width: @div-width; background-color: @color - 100; } #right{ width: @div-width * 2; background-color: @color; }

CSS:

 #left { width: 100px; background-color: #004590; } #right { width: 200px; background-color: #03a9f4; }

Functions

Less also has its own functions, such as obtaining image size, unit conversion, array, etc., such as

adopt image-width 、 image-height and image-size , we can directly obtain the size of the image

Less:

 .img{ width:image-width("../img/less-logo.png"); height:image-height("../img/less-logo.png"); margin:image-size("../img/less-logo.png"); }

CSS:

 .img { width: 300px; height: 100px; margin: 300px 100px; }

Arrays are also commonly used. Variables define a series of values we want to use. You can get the values directly through their positions. Note that Less arrays start from 1

Less:

 @list: red, blue, green, yellow; .list{ color:extract(@list, 1); border-color:extract(@list, 2); background-volor:extract(@list, 3); }

CSS:

 .list { color: red; border-color: blue; background-volor: green; }

Others

& It is used to directly inherit the last selector name when nesting writing, such as

Less:

 .a{ &:hover{ color:red; } } .p, .a, .ul, .li { border-top: 2px dotted #366; && { border-top: 0; } & + & { border-top: 0; } }

CSS:

 .a:hover{ color:red; } .p, .a, .ul, .li { border-top: 2px dotted #366; } .p.p, .p.a, .p.ul, .p.li, .a.p, .a.a, .a.ul, .a.li, .ul.p, .ul.a, .ul.ul, .ul.li, .li.p, .li.a, .li.ul, .li.li { border-top: 0; } .p + .p, .p + .a, .p + .ul, .p + .li, .a + .p, .a + .a, .a + .ul, .a + .li, .ul + .p, .ul + .a, .ul + .ul, .ul + .li, .li + .p, .li + .a, .li + .ul, .li + .li { border-top: 0; }

import Let's directly import other less files and compile them into css

other.less :

 @background-color: #eee; @text-color: #333; p{ background-color: @background-color; color: @text-color; padding: 15px; }

Less:

 @import "other.less";

CSS:

 p{ background-color: #eee; color: #333; padding: 15px; }

epilogue

Less has many more, such as if and loop For more advanced learning, you can view the official documents

Do you support me by not commenting after reading? More content, so far~

reference resources

webpack.js.org/loaders/css-loader
webpack.js.org/loaders/style-loader
webpack.js.org/loaders/less-loader
lesscss.org

This article is written by Chakhsu Lau Creation, adoption Knowledge Sharing Attribution 4.0 International License Agreement.
All articles on this website are original or translated by this website, except for the reprint/source. Please sign your name before reprinting.