从 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，因为在对第三方包使用绝对导入时该目录是隐含的，不应包含在路径中。

–

发表评论