Question

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

我怀疑问题是由于CSS模块引起的。我真的不确定如何使用CSS模块从节点模块导入cropper.css。

我尝试像使用import cropperStyles from 'cropperjs/dist/cropper.css';这样的css模块那样导入样式文件。没用。

然后我尝试将cropper.css移到公用文件夹，并将其像index.html一样加载到<link rel="stylesheet" href="%PUBLIC_URL%/cropper.css">中。效果很好。但这不是正确的方法。

Answer 1

我使用react-crop并成功了我这样导入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}
      />
 ....
        }

}

使用reactjs中的css模块从节点模块导入css文件

1 个答案: