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

问题描述 投票:0回答:1

我正在使用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">中。效果很好。但这不是正确的方法。

reactjs node-modules css-modules
1个回答
0
投票

我使用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}
      />
 ....
        }

}
© www.soinside.com 2019 - 2024. All rights reserved.