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

Question

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

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

但我得到错误:

找不到模块:您试图导入/node_modules/packagename/css/styles.css,它位于项目src /目录之外.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.

我宁愿不将CSS移动到src /所以它可以通过NPM更新.我可以符号链接但是当我在Windows上开发并部署到linux时,这并不理想.

从我这里包含CSS的最佳方式是什么？

Answer 1

node_modules不需要相对路径,不应该是包含css的推荐方法

您所要做的就是省略前面的斜杠和node_modules目录,就像从节点模块导入js包一样:

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

Answer 2

查找css文件的路径

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

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

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

Answer 3

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

如果要将node_modules样式表导入组件，则不需要如上所述的相对路径。

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

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

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