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

【问题标题】：import css file from node modules using css module in reactjs使用 reactjs 中的 css 模块从节点模块导入 css 文件
【发布时间】：2019-12-14 19:21:24
【问题描述】：

我正在使用react-cropper 在我的项目中包含裁剪器界面。我在将样式导入组件时遇到问题。根据文档，import 'cropperjs/dist/cropper.css'; 应该可以完成这项工作。但我在我的项目中使用 css 模块。 IE。 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】：

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

}

【讨论】：