javascript – 如何在React中导入特定于组件的CSS样式？

2019-07-02 04:22:08 阅读：234 来源： 互联网

标签：javascript css reactjs webpack-dev-server html

这是我试图模仿的结构(从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;

然后为页脚元素生成className,以将样式应用于该特定组件.

但是,当我尝试在我的项目中模仿这个结构时,它无法正常工作.导入的样式对象始终为空.我怀疑我可能缺乏一些依赖性,但我无法弄清楚它可能是什么.

我想知道我可能缺少哪个依赖项和/或我需要做的webpack配置才能将相同的结构应用到我的项目中.

解决方法:

您可以像这样配置您的webpack

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

标签：javascript,css,reactjs,webpack-dev-server,html
来源： https://codeday.me/bug/20190702/1353512.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何在React中导入特定于组件的CSS样式？