Reactjs 使用Laravel Mix与React、TypeScript和Ant设计
我在配置laravel mix以正确使用React、Typescript和Ant设计时遇到问题。 我从React with JS开始,没有使用TypeScript,它工作得很好(Ant设计风格是用覆盖的变量导入的) 但在添加了Typescript之后,导入Ant设计样式就停止了工作。要使其正常工作,我需要手动将antd样式文件导入到我的主style.scss文件中。但在这种情况下,包变得巨大,变量覆盖不起作用 webpack.mix.js:Reactjs 使用Laravel Mix与React、TypeScript和Ant设计,reactjs,typescript,antd,laravel-mix,Reactjs,Typescript,Antd,Laravel Mix,我在配置laravel mix以正确使用React、Typescript和Ant设计时遇到问题。 我从React with JS开始,没有使用TypeScript,它工作得很好(Ant设计风格是用覆盖的变量导入的) 但在添加了Typescript之后,导入Ant设计样式就停止了工作。要使其正常工作,我需要手动将antd样式文件导入到我的主style.scss文件中。但在这种情况下,包变得巨大,变量覆盖不起作用 webpack.mix.js: const mix = require('larave
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();
.LRC:
{
"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使用create react应用程序描述用例,但我需要让它与laravel mix一起工作
可能有人也在与类似的问题作斗争