Create-React-App：从 node_module 目录中包含 CSS 的最佳方法是什么

Question

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

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

但我收到错误消息：

Module not found: You attempted to import /node_modules/packagename/css/styles.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

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

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

Answer 1

找到 css 文件的路径

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

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

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

Answer 2

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

的推荐方式

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

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

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

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

Answer 3

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

特别是 React 应用程序现在运行在 src 文件夹中，导入文件需要在 public 文件夹中。

我用的是materialize-social，发现最简单的方法就是把node_module文件夹"materialize-social"移动到public目录下，其他方法请大家点赞

Answer 4

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

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

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

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

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

Create-React-App：从 node_module 目录中包含 CSS 的最佳方法是什么

Create-React-App: What's the best way to include CSS from node_module directory

create-react-app