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.

ThinhDev · Accepted Answer · 2022-03-03 04:06:45Z

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,
                        }
                    }
                }
            ]
        }]}
    })

edited Mar 3, 2022 at 4:06

answered Mar 1, 2022 at 13:27

ThinhDev

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Buwaneka Sumanasekara · Accepted Answer · 2021-08-09 07:14:55Z

0

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",
      },
    },
  });

answered Aug 9, 2021 at 7:14

Buwaneka Sumanasekara

6632 gold badges9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Use Laravel Mix with React, TypeScript and Ant Design

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related