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

React.js

LGO西里

2020-03-16

我想将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文件的文件的位置。

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

第1721篇《如何在React组件中导入CSS文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
村村LEY宝儿 2020.03.16

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

安装它：

npm install css-loader --save-dev

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android