gpt4 book ai didi

reactjs - 将 Laravel Mix 与 React、TypeScript 和 Ant Design 结合使用

转载 作者:行者123 更新时间:2023-12-05 06:19:18 25 4
gpt4 key购买 nike

我在配置 laravel-mix 以与 React、Typescript、Ant Design 一起正常工作时遇到问题。我从不使用 TypeScript 的 JS 开始使用 React,它运行良好(Ant Design 样式是使用覆盖变量导入的)。

但是添加Typescript后,导入Ant Design样式就不行了。为了让它工作,我需要手动将 antd 样式文件导入到我的主样式 .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 设计documentation描述了 create-react-app 的用例,但我需要让它与 laravel-mix 一起工作。

可能有人遇到过类似的问题。

最佳答案

试试吧!

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

关于reactjs - 将 Laravel Mix 与 React、TypeScript 和 Ant Design 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60857259/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com