使用 ReactJS 中的 CSS 模块从节点模块导入 CSS 文件

Question

我正在使用react-cropper在我的项目中包含一个裁剪器接口。 我在将样式导入组件时遇到问题。根据文档，import 'cropperjs/dist/cropper.css';应该完成这项工作。但是我在我的项目中使用 css 模块。韦普import classes from './style.scss';并像<div className={classes['image-cropper-wrap']}>一样使用它.

我怀疑问题是因为 css 模块。我真的不确定如何使用 css 模块从节点模块导入cropper.css。

我尝试像使用 css 模块一样导入样式文件，如import cropperStyles from 'cropperjs/dist/cropper.css';.它没有用。

然后，我尝试将cropper.css移动到公用文件夹并将其加载到index.html中，例如<link rel="stylesheet" href="%PUBLIC_URL%/cropper.css">。它工作得很好。但这不是正确的方法。

Answer 1

我使用反应裁剪并且它有效 我像这样导入了CSS文件

import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
class Avatar extends Component{...
onImageLoaded = image => {
this.imageRef = image;
};
onCropComplete = crop => {
this.makeClientCrop(crop);
};
render() {...
<ReactCrop
src={this.state.src}
crop={this.state.crop}
onChange={crop => this.setState({ crop })}
onImageLoaded={this.onImageLoaded}
onComplete={this.onCropComplete}
/>
....
}
}