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

我想将CSS文件导入react组件

我已尝试从“../../../public/styles/disabledLink”导入禁用链接但我得到下面的错误

未找到模块：错误：无法解析c:\Users\User\Documents\pizza app\client\src\components@./client/src/components/ShoppingCartLink.js 19:20-66哈希：2d281bb98fe0a961f7c4版本：webpack 1.13.2

C:\Users\User\Documents\pizza app\client\public\style\disabledLink.css

是我试图加载的css文件的位置

在我看来，import似乎没有找到正确的路径

我认为使用

。/../../

它将开始查找上面三个文件夹层的路径

C:\Users\User\Documents\pizza app\client\src\components\ShoppingCartLink.js

是应导入CSS文件的文件的位置

---

我做错了什么？如何修复它？

我建议使用CSS模块：

反应

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

从“React”导入React；
从“/table.css”导入样式；
导出默认类表扩展React.Component{
渲染（）{
返回
A0
B0
;
}
}

呈现组件：

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

A0
B0

使用webpack创建捆绑包时需要使用

安装它：

npm install css-loader --save-dev

并将其添加到网页包中的加载程序配置：

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

---

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

如果您不需要：

e、 g

---

请参见此处的完整示例（）。

以下内容将在React组件中导入外部CSS文件，并在网站的

中输出CSS规则

安装并安装：

在webpack.config.js中：

在组件文件中：

安装样式加载器和CSS加载器：

npm install --save-dev style-loader
npm install --save-dev css-loader

配置网页包

module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }

---

如果您只想将样式表中的一些样式注入到组件中，而不捆绑在整个样式表中，我建议您这样做。例如：

const btnStyle = styledImport.react('../App.css', '.button')

// btnStyle is now { color: 'blue' } or whatever other rules you have in `.button`.

---

注意：我是这个库的作者，我为大量导入样式和CSS模块不是最佳或最可行的解决方案的情况构建了它。

您也可以使用所需的模块

require('./componentName.css');
const React = require('react');

---

上述解决方案已完全更改，不推荐使用。如果你想使用CSS模块（假设你导入了CSS加载器），那么我已经尝试了这么长时间，终于找到了答案。在新版本中，默认的webpack加载程序完全不同

在您的网页包中，您需要找到一个以cssRegex开头的部件，并将其替换为该部件

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}

---

您可以在

.jsx

文件中导入

.css

文件

这里有一个例子-

import Content from '../content/content.jsx';

---

CSS模块允许您在不同的文件中使用相同的CSS类名，而无需担心命名冲突。

Button.module.css

另一个-stylesheet.css

Button.js

import React，{Component}来自'React'；
从“./Button.module.css”导入样式；//将css模块样式表作为样式导入
导入“./另一个样式表.css”；//导入常规样式表
类按钮扩展组件{
render（）{
//作为js对象的引用
返回错误按钮；
}
}

使用extract css chunks网页包插件和css加载器对我来说很有效，请参见以下内容：

webpack.config.js导入提取css块网页包插件

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

webpack.config.js添加css规则， 首先提取css块，然后css加载程序将它们嵌入到 html文档、确保css加载器和提取css块webpack插件位于package.json dev dependencies中

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

webpack.config.js制作插件实例

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

现在可以导入css了 现在在像index.tsx这样的tsx文件中，我可以像这样使用导入 导入“./Tree.css”，其中Tree.css包含如下css规则

body {
    background: red;
}

我的应用程序正在使用typescript，这对我很有效，请检查我的回购协议以获取来源：

---

嘿，怎么了：D，上面看起来只有两个文件夹（components&src）嘿，你说得对，但它仍然不起作用。我注意到我不能使用导入，因为我不能在CSS文件中使用导出。使用这种方式，我得到了错误->@media only screen and（最小宽度：320px）和（最大宽度：640px）{^SyntaxError:Module处的无效或意外标记。\u compile（internal/modules/cjs/loader.js:723:23）我想在下面添加第1部分作为答案。您可以按照我的答案来测试组件。如果尝试了这个方法，但它不起作用。我尝试过这样包含它：

从“/disabledLink.css”导入样式；

并获得以下错误：未找到模块：错误：无法解析“文件”或“目录”。/disabledLink.css在c:\Users\Basti Kluth\Documents\pizza app\client\src\components@./client/src/components/ShoppingCartLink.js 19:20-49css模块应该分开安装，我如何为这种类型的css编写媒体查询，知道吗？我不知道我很乐意将另一个模块导入到这个项目中。他们的另一个解决方案是否只适用于reactjs或本机js？因此我想我必须使用类似的东西：HTMLElement.styleIt看起来有点难看。为什么不允许在包构建中添加更改？这是关于reactjs的工作区的后处理，我们被告知要解决这个问题与workshipOk期间包含的模块有冲突，但我只想指出，获取样式标记并不像您在问题中所问的那样导入css文件。这是两个不同的问题。我使用babel运行watcher。可能它根本看不到webpack.config.js文件。您安装了css加载程序吗？我也没有看到您的webpack.config、 你可以在对象格式中添加更多的模块规则作为

规则

数组的值。当我尝试用babel Regite运行mocha时，这对我不起作用

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

body {
    background: red;
}