如何在 React 中导入特定于组件的 css 样式?
How can I import component-specific css styles in React?
这是我试图模仿的结构(来自 react-boilerplate):
component
|Footer
|style.css
|Footer.js
在 Footer.js 中,样式以这种方式非常优雅地导入:
import React from 'react';
import A from 'components/A';
import styles from './styles.css';
function Footer() {
return (
<footer className={styles.footer}>
<section>
<p>This project is licensed under the MIT license.</p>
</section>
<section>
<p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>
</section>
</footer>
);
}
export default Footer;
然后为页脚元素生成类名,以将样式应用于该特定组件。
但是当我尝试在我的项目中模仿这种结构时,它不起作用。导入的 styles
对象始终为空。我怀疑我可能缺乏某种依赖性,但我不知道它可能是什么。
我想知道我可能缺少哪个依赖项 and/or 我需要配置 webpack 才能将相同的结构应用到我的项目中。
你可以像这样配置你的 webpack
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .
不太确定,但您似乎正在寻找 styles.css
和 javascript
import styles from './styles.css';
并且您的目录中有一个 style.css
:)
这是我试图模仿的结构(来自 react-boilerplate):
component
|Footer
|style.css
|Footer.js
在 Footer.js 中,样式以这种方式非常优雅地导入:
import React from 'react';
import A from 'components/A';
import styles from './styles.css';
function Footer() {
return (
<footer className={styles.footer}>
<section>
<p>This project is licensed under the MIT license.</p>
</section>
<section>
<p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>
</section>
</footer>
);
}
export default Footer;
然后为页脚元素生成类名,以将样式应用于该特定组件。
但是当我尝试在我的项目中模仿这种结构时,它不起作用。导入的 styles
对象始终为空。我怀疑我可能缺乏某种依赖性,但我不知道它可能是什么。
我想知道我可能缺少哪个依赖项 and/or 我需要配置 webpack 才能将相同的结构应用到我的项目中。
你可以像这样配置你的 webpack
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .
不太确定,但您似乎正在寻找 styles.css
和 javascript
import styles from './styles.css';
并且您的目录中有一个 style.css
:)