Kompilujeme Less styly Webpackem

Pro pohodlné stylování webových projektů je vhodné využít nějaký ten CSS preprocesor a jedním z nejoblíbenějších je Less. Jak ho zapojit do Webpacku se dozvíte v článku.

Proč používat preprocesor?

Příklad, který jsem si pujčil přímo z homepage Lessu ukazuje, jaké možnosti takový nástroj přináší: proměnné, funkce i matematické operace.

@base: #f938ab;

.box-shadow(@style, @alpha: 50%) {
    -webkit-box-shadow: @style rgba(0, 0, 0, @alpha);
    box-shadow:         @style rgba(0, 0, 0, @alpha);
}

.box {
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);

    div { .box-shadow(0 0 5px, 30%) }
}

Díky tomu je možné i v CSS využít DRY princip a zjednodušit si tak následný refaktoring. Změnu barvy všech stínů pak provedete elegantně z jednoho místa. Výsledným je však prachobyčejné CSS, které nám připraví Webpack.

Konfigurace Webpacku

Samotný Webpack však překlad LESS stylů neumožňuje. Bude potřeba nainstalovat potřebná rozšíření:

npm install --save-dev less less-loader  
npm install --save-dev style-loader css-loader  
npm install --save-dev extract-text-webpack-plugin  

A do konfiguračního skriptu Webpacku webpack.config.js přidat následující direktivy:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {  
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css')
    ]
};

ExtractTextPlugin zajistí, že veškerý CSS bude v samostném souboru, který bude možné načíst paralelně vedle JavaScriptu a mezi jeho parametry je less loader.

Aby však byly Less styly zahrnuty do hlavního bundlu, je potřeba je ve zdrojovém JavaScriptu zmínit (v tomto případě v entrypointu /public/lib/main.js):

// /public/lib/main.js

require('../less/default.less');  

A je hotovo. Celý příklad, jak rozběhnout WebPack včetně webserveru postaveném na Koa.js najdete v článku o Webpacku a Koa.js.

Kam dále

David Menger

Read more posts by this author.