如何在 React 组件中导入 CSS 文件

javascript reactjs relative-path

2022-08-30 03:07:04

我想将CSS文件导入到反应组件中。

我已经尝试过，但我得到下面的错误;import disabledLink from "../../../public/styles/disabledLink";

未找到模块：错误：无法解析“文件”或“目录”。/../../public/styles/disabledLink in c：\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19：20-66 Hash： 2d281bb98fe0a961f7c4 版本： webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css是我尝试加载的 CSS 文件的位置。

对我来说，导入似乎没有找到正确的路径。

我以为它会开始查找上面三个文件夹层的路径。../../../

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js是应导入 CSS 文件的文件的位置。

我做错了什么，我该如何解决？

答案 1

如果您不需要，您甚至不必命名它：

例如：

import React from 'react';
import './App.css';

在这里看到一个完整的例子（构建一个JSX Live编译器作为React组件）。

答案 2

在使用 webpack 创建捆绑包时，您需要使用 css-loader。

安装它：

npm install css-loader --save-dev

并将其添加到 webpack 配置中的加载程序：

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

在此之后，您将能够在js中包含css文件。