模块解析失败:将 React on Rails 与 Antd 一起使用时出现意外字符“@”。
Posted
技术标签:
【中文标题】模块解析失败:将 React on Rails 与 Antd 一起使用时出现意外字符“@”。【英文标题】:Module parse failed: Unexpected character '@' when using React on Rails with Antd. 【发布时间】:2019-01-20 17:23:22 【问题描述】:我正在使用 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 文件有关,这表明它是一个 less 或 sass 文件。
我能够加载样式的唯一成功方法是放置
@import 'antd/dist/antd.css';
在我的 app/assets/stylesheets/page.scss 中。
虽然此选项有效,但它不允许import on demand
的功能,并且感觉导入 css 的方式不正确,因为它使用 rails 资产管道而不是 webpack(通过 webpacker)
【问题讨论】:
【参考方案1】:对我来说,问题是我需要在 webpack 中为 antd 模块中的 .less 文件和我在项目中本地编写的 .less 文件配置不同的 .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",
【讨论】:
以上是关于模块解析失败:将 React on Rails 与 Antd 一起使用时出现意外字符“@”。的主要内容,如果未能解决你的问题,请参考以下文章
(React on Rails)引擎“节点”与此模块不兼容。预期版本“...”
MP4 文件未在 React / Rails 应用程序上加载
Rails 6 无法导入纱线依赖项:未捕获错误:模块解析失败:意外字符“#”(1:0)