Create-React-App：从 node_module 目录包含 CSS 的最佳方式是什么答案

【问题标题】：Create-React-App: What's the best way to include CSS from node_module directoryCreate-React-App：从 node_module 目录包含 CSS 的最佳方式是什么
【发布时间】：2018-01-21 08:19:18
【问题描述】：

我正在尝试在我的 create-react-app 项目中包含一些 CSS。 CSS 来自第 3 方 NPM 包，因此位于 node_modules 目录中。

我试过了： import '/node_modules/packagename/css/styles.css';

但我得到了错误：

未找到模块：您尝试导入位于项目 src/ 目录之外的 /node_modules/packagename/css/styles.css。不支持 src/ 之外的相对导入。您可以将它移到 src/ 中，或者从项目的 node_modules/ 中添加符号链接。

我不希望将 CSS 移动到 src/ 以便它可以通过 NPM 更新。我可以进行符号链接，但是当我在 Windows 上开发并部署到 linux 时，这并不理想。

我认为包含 CSS 的最佳方式是什么？

【问题讨论】：

标签： create-react-app

【解决方案1】：

找到css文件的路径

示例：./node_modules/packagename/dist/css/styles.css

使用与 node_modules 相关的路径导入（node_modules/ 之后的任何内容）

import 'packagename/dist/css/styles.css'

【讨论】：

您绝对不应该使用node_modules 文件夹中任何内容的相对路径。 create-react-app 中的 node_modules css 可以像 node modules 文件夹中的任何 js 包一样导入
正确！如果 css 加载器定义正确，它应该从没有相对路径的包中加载 css。
@AfzalHossain 也许您应该相应地更新您的答案？

【解决方案2】：

相对路径在 node_modules 中是不必要的，不应该是包含 css 的推荐方式

你所要做的就是去掉前面的斜杠和 node_modules 目录，就像从节点模块导入 js 包一样：

import 'package/css/style-to-import.css'

使用 (s)css 导入时，使用波浪号 (~) 表示绝对导入：

@import '~package/css/style-to-import.css'

【讨论】：

是的，大部分css都在<package>/dist文件夹中

【解决方案3】：

与之前的答案不同的是，它取决于您将 CSS 导入的位置；组件或样式表。

如果您将node_modules 样式表导入组件，则不需要上面提到的相对路径。

import 'packagename/dist/css/styles.css'

但是，如果要将 node_modules 样式表导入 CSS/SCSS 文件，则需要使用波浪号 ~。

@import '~packagename/dist/css/styles.css'

【讨论】：

【解决方案4】：

我发现这是一个痛苦的错误。特别是我的 webpack.config.js 不再运行了。

specially react 应用现在在 src 文件夹中运行，导入文件需要在 public 文件夹中。

我正在使用materialize-social，发现最简单的方法是将node_module文件夹“materialize-social”移动到公共目录中，请以其他方式推荐它。

【讨论】：