模块解析失败：将 React on Rails 与 Antd 一起使用时出现意外字符"@"。

Question

我正在使用React on Rails，并且一直在尝试使用Antd UI框架。

我已经成功地从"antd"导入了组件，如按钮和日期选择器

import { Button } from 'antd';

但它们根本没有风格。查看我的服务器，我有以下错误...

ERROR in ./node_modules/antd/lib/button/style/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "../../style/themes/default";
| @import "../../style/mixins/index";
| @import "./mixin";
@ ./node_modules/antd/lib/button/style/index.js 5:0-23
@ ./app/javascript/packs/application.js
ERROR in ./node_modules/antd/lib/style/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "./themes/default";
| @import "./core/index";
|

我已经尝试了几种不同的方法来访问样式，例如直接引用我的jsx文件中的特定样式表

//app/javascript/bundles/Page/components/Page.jsx
import React, { Component } from "react";
// import { Button, DatePicker } from 'antd'
import { Button } from 'antd';
// import Button from 'antd/lib/button';
// import 'antd/lib/button/style/css';
export default class Page extends Component {
render() {
return (
<div >
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>
);
}
}

---

查看 Antd 文档，我遵循了按需导入技术并添加了

"import", {
"libraryName": "antd",
"style": "css",  
}
]

到我的 .babelrc 文件

https://ant.design/docs/react/getting-started#Import-on-Demand

我也尝试安装less和less-loader，因为我很确定它与包含"@"的 css 文件有关，该文件向我表明它是一个不太或更糟糕的文件。

---

我能够加载样式的唯一成功方法是将

@import 'antd/dist/antd.css';

在我的应用程序/资产/样式表/页面.scss中。

虽然此选项有效，但它不允许import on demand，并且感觉像是导入 css 的错误方式，因为它使用 rails 资产管道而不是 webpack(通过 webpacker(

Answer 1

对我来说，问题是我需要在 webpack 中为在 antd 模块中找到的 .less 文件和我在项目中本地编写的 .less 文件在 webpack 中配置不同的 .less 加载器。

对于 Antd，我有这个(请注意，它不包括/src/(：

{
test: /.(less)$/,
exclude: [
/.(css)$/,
/src/
],
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "less-loader",
options: {
javascriptEnabled: true,
modifyVars: get_theme()
}
}
]
},

对于我自己的 .less 文件，我有这个：

{
test: /.(less)$/,
exclude: [
/.(css)$/,
/node_modules/
],
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: "less-loader",
options: {
javascriptEnabled: true
}
}]
},

我正在使用的依赖项版本：

"css-loader": "^3.3.2",
"less": "3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"style-loader": "^1.2.1",
"antd": "4.4.2",
"webpack": "^4.43.0",