Software developer

Developer of webapps and more since 2016

09 Apr 2020

454
LESS modules/ant design/typescript webpack loader

Warning : this configuration of webpack requires ejecting Create React App.

If you don't know what is ejecting, read this.

An alternative to ejecting is to use craco.js.

Introduction

I Had project at work (typescript react app, SPA) for which I needed to add ant design and css modules.

I managed to configure it, as it took me a few days to configure it and it was painful, I want to share my configuration so it is helpful to others.

Prérequisite

Installation of dependencies

// solution for webpack 3, css-loader < 1.0.0
npm i --save-dev less-loader typings-for-css-modules-loader



// solution for webpack 4, css-loader >= 1.0.0
// https://github.com/TeamSupercell/typings-for-css-modules-loader

npm i --save-dev less-loader @teamsupercell/typings-for-css-modules-loader

Here is the webpack configuration :


rules: [{
           test: /\.modules\.less$/,
           use: [{
               loader: 'style-loader' // creates style nodes from JS strings
           },{
               loader: 'typings-for-css-modules-loader',
               options:{
                   modules:true,
                   namedExport: true,
                   camelCase: true,
               }
           },{
               loader: 'less-loader',
               options: { javascriptEnabled: true }
           }]
        }, {
            test: /\.less$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: 'theme.css'
                }
            },{
                loader: 'less-loader',
                options: { javascriptEnabled: true }
            }]
        }]


// less/theme.less

@import "~antd/lib/style/color/colors.less";

// customize the variables of ant design (pick it from https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)



// less/main.less

@import "~antd/dist/antd.less"; // import from node_modules
@import "./theme.less";
// index.ts

import './less/main.less';

With this webpack configuration, the less files from ant design framework are imported "as is" and you can name your less files with extension .modules.less to enjoy css modules.

To add classes in components with css modules style, import the stylesheet in the component and use it as following :


// components/App.tsx
// typings-for-css-modules-loader :
import * as style from './index.modules.less';

// @teamsupercell/typings-for-css-modules-loader
import style from './indes.modules.less';

render(){
   return (
       <div className={style.nameofyourclass} />
   );
}

When creating a file with css modules, the webpack build will generate typings files (eg: index.modules.less.d.ts) for each *.modules.less file. This is the file you import in your components.

Sometimes when creating a less file with css modules, you need to edit your component file where you import this less file to trigger a rebuild of the app and generate the corresponding typings file.