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

我想将CSS文件导入React组件。

我已经尝试过,import disabledLink from "../../../public/styles/disabledLink";但是下面出现错误;

找不到模块:错误:无法解析c:\ Users \ User \ User \ Documents \ pizza-app \ client \ src \ components @中的“文件”或“目录” ../../../public/styles/disabledLink。 /client/src/components/ShoppingCartLink.js 19:20-66哈希: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文件的文件的位置。

我在做什么错,我该如何解决?

村村LEY宝儿2020/03/16 14:00:09

使用wepback创建捆绑软件时,需要使用css-loader

安装它:

npm install css-loader --save-dev

并将其添加到您的webpack配置中的加载器中:

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

之后,您将可以在js中包含CSS文件。