Use Laravel Mix with React, TypeScript and Ant Design

Question

I have problem with configure laravel-mix to work properly with React, Typescript, Ant Design. I started with React with JS without TypeScript and it worked nicely (Ant Design styles were being imported with overridden variables).

But after adding Typescript, importing Ant Design styles stopped working. To make it work I need to manually import antd styles file into my main style.scss file. But in that case, the bundle becomes huge and variables overriding doesn't work.

webpack.mix.js:

const mix = require('laravel-mix');
const AntdScssThemePlugin = require('antd-scss-theme-plugin');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    AntdScssThemePlugin.themify({
                        loader: "less-loader",
                        options: {
                            javascriptEnabled: true
                        }
                    })
                ],
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
                options: {
                transpileOnly: true
                }
            }           
        ]
    },
    resolve: {
      extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx", ".less", ".scss", ".css"]
    },
    plugins: [
        new AntdScssThemePlugin('./resources/sass/_theme.scss') // theme customization
    ]
});

mix.setPublicPath('../public_html')
    .react('resources/js/app.js', '../public_html/js')
    .sass('resources/sass/app.scss', '../public_html/css')
    .extract(['react', 'react-dom', 'react-router-dom', 'react-redux', 'redux', 'redux-thunk', 'axios'])
    .sourceMaps(!mix.inProduction(), 'source-map')
    .version();

.babelrc:

{
    "presets": [
        [
            "@babel/preset-env", {
                "targets": {
                    "browsers": [ ">5%", "not op_mini all"]
                }
            }
        ], 
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["import", {
            "libraryName": "antd",
            "libraryDirectory": "es",
            "style": true
        }]
    ]
}

Ant Design documentation describes use case with create-react-app but I need to make it work with laravel-mix.

Mayble someone struggled with similar problem.

Answer 1

Try it!

 mix.js('resources/js/app.js', 'public/js').react().sass('resources/sass/app.scss', 'public/css').webpackConfig({ module: { rules: [{ test: /\.less$/, use: [ { loader: "less-loader", options: { lessOptions: { modifyVars: { '@primary-color': '#307839' }, javascriptEnabled: true, } } } ] }]} })

Answer 2

I have configure ant design for custom colors in larvel 8

versions I configured

"less": "^4.1.1",
"less-loader": "^10.0.1",
"antd": "^4.16.11",

Steps I followed

• Install antd using npm i --s antd
• Install less using npm i --s less less-loader
• change your webpack.mix.js file like bellow

 mix .js("resources/js/app.js", "public/js") .react() .sass("resources/sass/app.scss", "public/css") .less("resources/less/app.less", "public/css", { lessOptions: { javascriptEnabled: true, modifyVars: { "primary-color": "#0BD37E", }, }, });