如何在反应组件中导入 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>;
}
}

渲染组件:

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

小开

在使用 webpack 创建 bundle 时，需要使用 Css-loader。

安装:

npm install css-loader --save-dev

并将其添加到 webpack 配置中的加载程序中:

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

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

小开

最佳答案

如果你不需要，你甚至不需要给它命名:

例如:。

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

这里有一个完整的例子(构建一个作为 React 组件的 JSX Live 编译器)。

小开

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

安装装样器和 CSS 加载程序:

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

小开

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

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

Configure webpack

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

小开

如果您只是想将样式表中的某些样式注入到组件中，而不需要将整个样式表捆绑在一起，那么我建议使用 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 模块不是最好或最可行的解决方案的情况构建了它。

小开

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

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

小开

上面的解决方案已经完全改变和废弃了。如果您想使用 CSS 模块(假设您导入了 CSS-loader) ，我已经花了很长时间试图找到这个问题的答案，最终找到了。默认的 webpack 加载程序在新版本中有很大的不同。

在您的 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

.error {
background-color: red;
}

另一个样式表

.error {
color: red;
}

纽扣

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

小开

对我来说，使用 tract-css-block-webpack-plugin 和 css-loader 加载程序就可以了，参见下面的内容:

Js 导入提取物-css-block-webpack-plugin

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

Webpack.config.js 添加 css 规则, 首先提取 css 块，然后 css 加载程序 css 加载程序将把它们嵌入 Html 文档，确保 css-loader 和 tract-css-block-webpack-plugin 位于 package.json dev 依赖项

中

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'
})
]

现在导入 css 是可能的 现在在 index.tsx 这样的 tsx 文件中，我可以像这样使用 import Import’./Tree.css’其中 Tree.css 包含如下 css 规则

body {
background: red;
}

我的应用程序正在使用打印脚本，这对我很有用，查看我的回购源: Https://github.com/nickjohngray/staticbackeditor

小开

你可以导入 css 文件，如果 css 文件驻留在同一个文件夹中，你想导入只是简单的尝试这一点

Import’./styles.css’

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

Import’. ./mainstyle/styles.css’