从 React 中的 node_modules 导入 CSS 文件

在 React 中从 node_modules 导入一个 CSS 文件

Import a CSS file from node_modules in React

在 React 中使用绝对路径从 node_modules 导入 CSS 文件,例如
import 'bootstrap/dist/css/bootstrap.min.css'. 确保安装了特定的包,省略node_modules目录并以包名开头。

应用程序.js
// 👇️ import CSS from node_modules import 'bootstrap/dist/css/bootstrap.min.css'; const App = () => { return ( <div> <h2 className="text-white bg-dark">hello world</h2> </div> ); }; export default App;

该示例直接从
目录中导入
引导程序包的 CSS
node_modules

如果您要将node_modules目录中的 CSS 文件导入 CSS 或 SCSS 文件,请在路径前加上波浪号~,例如
@import '~bootstrap/dist/css/bootstrap.min.css'.

波浪号~用于指示绝对路径。

从 导入 CSS 文件时node_modules,您必须确保安装了特定的包,例如通过运行. npm install bootstrap

请注意,您不应使用相对路径从node_modules.

您应该使用绝对路径并省略node_modules目录。

您的导入应以您从中导入的包的特定名称开始。

一旦您开始在导入路径中输入包的名称,例如
bootstrap/,您的 IDE 应该能够帮助您自动完成。

如果您的 IDE 不能帮助您自动完成,可能是您的导入路径不正确或者您没有安装特定的包。

一般的经验法则是大多数包都有一个dist目录,例如
bootstrap/distCSS 文件所在的目录。

大多数时候,您应该寻找带有.min.css扩展名的文件,因为这些文件已被缩小以减小大小并提高性能。

确保永远不要以 开头您的导入路径node_modules,因为在对第三方包使用绝对导入时该目录是隐含的,不应包含在路径中。

发表评论