使用 Laravel 與 React 混合，TypeScript 和 Ant 設計

Question

我在配置 laravel-mix 以與 React、Typescript、Ant Design 一起正常工作時遇到問題。 我從沒有 TypeScript 的 JS 開始使用 React，它運行良好（Ant Design styles 正在導入覆蓋變量）。

但是添加Typescript后，importing Ant Design styles就失效了。 為了讓它工作，我需要手動將 antd styles 文件導入到我的主 style.scss 文件中。 但在那種情況下，捆綁包變得很大，變量覆蓋不起作用。

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 設計文檔描述了使用 create-react-app 的用例，但我需要使其與 laravel-mix 一起使用。

也許有人遇到過類似的問題。

Answer 1

試試吧！

 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

我在 larvel 8 中為自定義顏色配置了螞蟻設計

我配置的版本

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

我遵循的步驟

• 使用npm i --s antd安裝npm i --s antd
• 使用npm i --s less less-loader安裝 less
• 像波紋管一樣改變你的 webpack.mix.js 文件

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