How to import less file globally with TSX file

Prerequisites

• Using yarn
• Using node 10.x
• Using an up-to-date master branch
• Using latest version of devtools. See wiki for howto update
• Link to stacktrace in a Gist (for bugs)
• For issue in production release, devtools output of DEBUG_PROD=true yarn build && yarn start
• Tried solutions mentioned in #400

Expected Behavior

Import ant.design styles globally and customize ui theme

I’m using ant.design UI

Current Behavior

Cannot import ant design less file globally

Possible Solution

Steps to Reproduce (for bugs)

1.Install related packages:

yarn add antd@3.26.15 less less-loader

2.less loader setting:

// webpack.config.renderer.prod.babel.js
        {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName:
                                    '[name]__[local]__[hash:base64:5]'
                            },
                            importLoaders: 1,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            }

// webpack.config.renderer.dev.babel.js
        {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName:
                                    '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            }

3.import antd theme from entrance file:

import 'antd/dist/antd.less';

4.Global import is not effective

Context

Your Environment

• Node version :v10.16.3
• Version or Branch used :v1.10
• Operating System and version :win10
• Link to your project :

[steveetm]

Actually it is working for me, but if you use css modules, class names are replaced with hashed names and you must import the css file into a variable and assign class names that variable. This is why I said this could be undesired for a global import, as usually you don’t want this when less/scss/css is global. Either try

import styles from './yourLessStyle.less`;
[...]
return (
<div className={styles.classFromYourStyle}></div>
)

or remove modules: { localIdentName: '[name]__[local]__[hash:base64:5]' }, from your loader config.

[huangshuwei]

@steveetm thx. it’s works when I remove css module config from less loader config

or remove modules: { localIdentName: ‘[name][local][hash:base64:5]’ }, from your loader config.