堆栈内存溢出
  繁体   English   中英

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

[英]How to import a CSS file in a React Component

 原文  2016-10-04 13:28:18  7   12    javascript/ reactjs/ relative-path

问题描述

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

我试过import disabledLink from "../../../public/styles/disabledLink"; 但我收到以下错误；

找不到模块：错误：无法解析 c:\\Users\\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 文件的文件的位置。

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

12 个解决方案

解决方案1
 196 已采纳  2017-09-24 02:47:32

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

例如

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

在此处查看完整示例（将 JSX 实时编译器构建为 React 组件）。

解决方案2
 58  2016-10-04 13:34:13

使用 webpack 创建包时需要使用css-loader 。

安装它：

npm install css-loader --save-dev

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

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

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

解决方案3
 39  2016-10-04 13:33:16

我建议使用 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>;
    }
}

渲染组件：

<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>

解决方案4
 21  2018-03-19 09:25:12

下面在 React 组件中导入一个外部 CSS 文件，并在网站的<head />中输出 CSS 规则。

  1. 安装样式加载器和CSS 加载器：
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. 在 webpack.config.js 中：
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. 在组件文件中：
import './path/to/file.css';

解决方案5
 6  2019-09-14 23:21:50

上述解决方案已完全更改和弃用。 如果您想使用 CSS 模块（假设您导入了 css-loaders），并且我一直在尝试为此寻找答案很长时间并最终做到了。 默认的 webpack 加载器在新版本中完全不同。

在你的 webpack 中，你需要找到一个以 cssRegex 开头的部分，并用这个替换；

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

解决方案6
 3  2020-02-19 13:45:42

CSS Modules 让你可以在不同的文件中使用相同的 CSS 类名，而不必担心命名冲突。

按钮.module.css

.error {
  background-color: red;
}

另一个样式表.css

.error {
  color: red;
}

按钮.js

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>;
  }
}

解决方案7
 1  2018-06-07 12:53:00

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

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

  2. 配置 webpack

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

解决方案8
 1  2019-07-23 20:12:41

您还可以使用所需的模块。

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

解决方案9
 0  2018-12-21 15:28:13

如果您只想将样式表中的一些样式注入到组件中而不捆绑整个样式表，我推荐https://github.com/glortho/styled-import 。 例如：

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

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

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

解决方案10
 0  2020-08-04 11:12:26

使用 extract-css-chunks-webpack-plugin 和 css-loader loader 对我有用，见下文：

webpack.config.js 导入extract-css-chunks-webpack-plugin

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

webpack.config.js添加css规则，先提取css Chunks然后css加载器css-loader将它们嵌入到html文档中，确保css-loader和extract-css-chunks-webpack-plugin在package.json dev中依赖

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

webpack.config.js 制作插件的实例

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 文件中，我可以像这样使用 import './Tree.css'，其中 Tree.css 包含 css 规则，例如

body {
    background: red;
}

我的应用程序正在使用打字稿，这对我有用，请检查我的回购源： https : //github.com/nickjohngray/staticbackeditor

解决方案11
 0  2022-01-15 04:57:52

如果 css 文件位于要导入的同一文件夹中，则可以导入 css 文件，而不是简单地试试这个

导入'./styles.css'

如果 css 文件远离我们的组件，该组件导航文件所在的位置并使用它

导入'../mainstyles/styles.css'

解决方案12
 -2  2019-10-29 08:19:05

您可以在.jsx文件中导入.css文件

这是一个例子——

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Electron 上的 React 组件中导入 CSS 文件 如何将反应组件中的 css 文件作为原始文本导入？ 如何在React组件中导入js文件？ 如何将 js 文件导入 React 组件？ 如何在React中导入特定于组件的CSS样式？ 在 css 文件中导入图像以进行反应 如何导入 json 数据文件并在反应组件中使用它？ 如何在react组件中导入chartist？ 如何在 React 中动态导入组件？ 如何在 React 组件中导入 SignalR？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM