Javascript 如何在 React 组件中导入 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39853646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import a CSS file in a React Component
提问by venter
I want to import a CSS file into a react component.
我想将 CSS 文件导入到 React 组件中。
I've tried import disabledLink from "../../../public/styles/disabledLink";but I get the error below;
我试过了，import disabledLink from "../../../public/styles/disabledLink";但出现以下错误；
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../public/styles/disabledLink in c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66 Hash: 2d281bb98fe0a961f7c4 Version: webpack 1.13.2
找不到模块：错误：无法解析 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.cssis the location of the CSS file I'm trying to load.
C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css是我尝试加载的 CSS 文件的位置。
To me it seems like import is not looking up the correct path.
在我看来，导入似乎没有找到正确的路径。
I thought with ../../../it would start to look up the path three folder layers above.
我以为用../../../它会开始查找上面三个文件夹层的路径。
C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.jsis the location of the file that should import the CSS file.
C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js是应该导入 CSS 文件的文件的位置。
What am I doing wrong and how can I fix it?
我做错了什么，我该如何解决？
回答by code4jhon
You don't even have to name it if you don't need to:
如果您不需要，您甚至不必命名它：
e.g.
例如
import React from 'react';
import './App.css';
see a complete example here (Build a JSX Live Compiler as a React Component).
在此处查看完整示例（将 JSX 实时编译器构建为 React 组件）。
回答by Alexandr Lazarev
You need to use css-loaderwhen creating bundle with webpack.
使用webpack 创建包时需要使用css-loader。
Install it:
安装它：
npm install css-loader --save-dev
And add it to loaders in your webpack configs:
并将其添加到 webpack 配置中的加载器：
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
// ...
]
}
};
After this, you will be able to include css files in js.
在此之后，您将能够在 js 中包含 css 文件。
回答by Mihir Patel
I would suggest using CSS Modules:
我建议使用 CSS 模块：
React
反应
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>;
}
}
Rendering the Component:
渲染组件：
<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>
回答by Webars
The following imports an external CSS file in a React component and outputs the CSS rules in the <head />of the website.
下面在 React 组件中导入外部 CSS 文件，并<head />在网站的 中输出 CSS 规则。
- Install Style Loaderand CSS Loader:
npm install --save-dev style-loader
npm install --save-dev css-loader- In webpack.config.js:
- 在 webpack.config.js 中：
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
- In a component file:
- 在组件文件中：
import './path/to/file.css';回答by Ugur Yilmaz
The solutions above are completely changed and deprecated. If you want to use CSS modules (assuming you imported css-loaders) and I have been trying to find an answer for this for such a long time and finally did. The default webpack loader is quite different in the new version.
上述解决方案已完全更改和弃用。如果您想使用 CSS 模块（假设您导入了 css-loader），并且我一直试图为此寻找答案很长时间，但最终还是做到了。默认的 webpack 加载器在新版本中完全不同。
In your webpack, you need to find a part starting with cssRegex and replace it with this;
在你的webpack中，你需要找到一个以cssRegex开头的部分，并用这个替换；
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
}
回答by Bertwin Romero
Install Style Loader and CSS Loader:
npm install --save-dev style-loader npm install --save-dev css-loaderConfigure webpack
module: { loaders: [ { test: /\.css$/, loader: 'style-loader' }, { test: /\.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } } ] }
安装样式加载器和 CSS 加载器：
npm install --save-dev style-loader npm install --save-dev css-loader配置 webpack
module: { loaders: [ { test: /\.css$/, loader: 'style-loader' }, { test: /\.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } } ] }
回答by Amaresh Tiwari
CSS Modules let you use the same CSS class name in different files without worrying about naming clashes.
CSS Modules 让你可以在不同的文件中使用相同的 CSS 类名，而不必担心命名冲突。
Button.module.css
按钮.module.css
.error {
background-color: red;
}
another-stylesheet.css
另一个样式表.css
.error {
color: red;
}
Button.js
按钮.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>;
}
}
回答by glortho
In cases where you just want to inject some styles from a stylesheet into a component without bundling in the whole stylesheet I recommend https://github.com/glortho/styled-import. For example:
如果您只想将样式表中的一些样式注入组件而不捆绑整个样式表，我推荐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`.
NOTE: I am the author of this lib, and I built it for cases where mass imports of styles and CSS modules are not the best or most viable solution.
注意：我是这个库的作者，我为大量导入样式和 CSS 模块不是最好或最可行的解决方案的情况构建了它。
回答by Juan Navarrete
You can also use the required module.
您还可以使用所需的模块。
require('./componentName.css');
const React = require('react');
回答by Saurabh Ramchandrarao Kulkarni
You can import your .cssfile in .jsxfile
您可以在.css文件中导入您的.jsx文件
Here is an example -
这是一个例子——
import Content from '../content/content.jsx';
