代码之家 › 专栏 › 技术社区 › SegFaultDev

模块分析失败:将React on Rails与Antd一起使用时出现意外字符“@”。

react-on-rails antd webpack reactjs ruby-on-rails

1

SegFaultDev · 技术社区 · 6 年前

我在Rails上使用React,并尝试使用antdui框架。

我成功地从“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';

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

虽然此选项有效,但它不允许 import on demand 感觉导入css的方法不正确,因为它使用rails资产管道而不是webpack(通过webpacker)

0 回复 | 直到 6 年前

1

0

Charles 4 年前

对我来说,问题是我需要在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()
                    }
                }
            ]
        },

            {
            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",