[英]Use Laravel Mix with React, TypeScript and Ant Design
我在配置 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 一起使用。
也许有人遇到过类似的问题。
试试吧!
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, } } } ] }]} })
我在 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 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", }, }, });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.