Question

正如标题所说，我想将CSS文件导入反应组件。我尝试过以下方法：

import disabledLink from "../../../public/styles/disabledLink";

但错误告诉我：

找不到模块：错误：无法解析＆＃39;文件＆＃39;或者＆＃39;目录＆＃39; 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：\用户\用户\文档\比萨饼应用内\客户\公共\样式\ disabledLink.css

对我而言，导入似乎没有找到正确的路径。我想../../../它会开始查找上面三个文件夹层的路径。

应该导入CSS文件的文件位于：

C：\用户\用户\文档\比萨饼应用内\客户\ SRC \部件\ ShoppingCartLink.js

感谢您的任何意见！

Answer 1

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

e.g。

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

在此处查看完整示例https://egghead.io/lessons/build-a-jsx-live-compiler

Answer 2

在使用wepback创建包时，您需要使用css-loader。

安装它：

npm install css-loader --save-dev

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

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

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

Answer 3

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

Answer 4

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

安装Style Loader和CSS Loader：

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

在webpack.config.js中：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

在组件文件中：

import './path/to/file.css';

Answer 5

CSS模块使您可以在不同文件中使用相同的CSS类名称，而不必担心命名冲突。

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

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

Answer 6

安装Style Loader和CSS Loader： npm install --save-dev style-loader npm install --save-dev css-loader
配置webpack

模块：{ 装载机：[ { 测试：/.css$/, 装载机：'style-loader' }，{ 测试：/.css$/, loader：'css-loader'，查询：{ 模块：是的， localIdentName：'[name] [local] _ [hash：base64：5]' } } ] }

Answer 7

以上解决方案已完全更改和弃用。如果您想使用css模块（假设您导入了css-loaders），那么我已经尝试了很长时间了，最终找到了答案。默认的webpack加载程序在新版本中完全不同。

在您的Webpack中，您需要找到一个以cssRegex开头的部分，并用它替换；

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

Answer 8

如果您只想将样式表中的某些样式注入到组件中而不捆绑整个样式表，我建议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模块的情况而构建的。

Answer 9

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

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

Answer 10

使用extract-css-chunks-webpack-plugin和css-loader加载程序对我有用，

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

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

webpack.config.js 添加CSS规则，首先提取css块，然后css加载器css-loader将它们嵌入到 html文档，请确保css-loader和extract-css-chunks-webpack-plugin位于package.json开发依赖项中

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

Answer 11

您可以将.css文件导入.jsx文件

这里是一个例子-

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

如何在react组件中导入css文件？

11 个答案: