LESS compiled into modules

I used a library called react-toolbox prior to Antd, and while I love Antd graphics and components, there is one thing I havent been able to figure out yet.

The way Less files are compiled, all styles remain global and can be used anywhere, where as the previos library, i believe takes advantage of css-loader ability to compile and modularize.

Example, on my previous library if I loaded the <button> component, it would result in something like this:

<button disabled="" class="theme__button___1iKuo theme__raised___ONZv6 theme__primary___2NhN1" type="button" data-react-toolbox="button" >

and the corresponding css would look something like this:

[disabled].theme__flat___2ui7t, [disabled].theme__floating___1mZ5E, [disabled].theme__raised___ONZv6, [disabled].theme__toggle___1Zy-o { ... }

and then any custom styles i could assign by importing styles into an object and assigning this into elements, something like:

import styles from 'forms.scss'; ....<div className={styles.formBox}...

In any case, all im asking is if there is a way to make antd work this way.

I spent a couple of hours already and so far i havent been able to make this work. I’ve played with the css-loader/less-loader settings in my webpack config to no avail.

Any ideas ?

[kappa-gooner]

@coljung , I ran into similar issues a couple of days back. Here’s what I ended up doing, hope it helps you out.

• You cannot use css-modules with antd components at this point of time. This also means, you will not be able to style your components like this div <className={styles.formBox}...

• antd components already have classes assigned to them; and all you need to do is to import both the component and it’s css classes using babel-plugin-import

• You need to ensure that your webpack build doesn’t treat the less modules as css-modules (this would mean that the classes would end up with hash names)

• Set your webpack less loader to look something like this, and hopefully, it should do the trick for you! 😃

{
	test: /\.less$/,
	loader: 'style!css?importLoaders=2!postcss!' +
		`less-loader?{"sourceMap":true,"modifyVars":${ JSON.stringify(theme) }}`
}

[iloginov]

With the following config you can use css-modules in your own styles while using ant.design

      {
        test: /\.less$/,
        oneOf: [
          {
            exclude: /antd/ ,
            use: [
              'style-loader',
              'css-loader?modules',
              'less-loader'
            ]
          },
          {
            include: /antd/ ,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: 'less-loader',
                options: {
                  modifyVars: { "@form-item-margin-bottom": "5px" }
                },
              },
            ]
          }
        ]
      },