时间戳

首页 > 解决方案 > 使用 reactjs 中的 css 模块从节点模块导入 css 文件

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

问题描述

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

我怀疑问题出在 CSS 模块上。我真的不确定如何cropper.css使用 css 模块从节点模块导入。

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

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

标签： reactjsnode-modulescss-modules

解决方案

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

}

推荐阅读