在React应用中导入CSS：能否从组件加载编译后的CSS文件？

当然可以！在Create React App（CRA）中，你完全可以从任意自定义组件里导入CSS文件，不管它是全局样式文件（比如你的App.css）还是其他样式文件。

为什么可行？ #

CRA内置的webpack配置会自动处理所有通过import导入的CSS文件：

• 当你在组件里导入CSS时，webpack会把这些样式收集起来，最终打包成一个（或多个）编译后的CSS文件。
• 这些样式会作用于整个应用，除非你使用了CSS Modules（文件名形如[name].module.css）来实现局部作用域。

你的示例写法是完全有效的 #

就像你写的这样：

// MyViewComponent.js
import '../../App.css';

这段代码会把App.css里的样式引入到当前组件所在的打包流程中，最终这些样式会生效在整个应用里。

额外提示 #

• 如果你的App.css是全局样式，导入到任何组件里效果都是一样的——全局样式会作用于所有匹配的元素。
• 如果你想让样式只作用于当前组件，可以改用CSS Modules：把文件名改成App.module.css，然后这样导入：

  import styles from '../../App.module.css';
  // 在组件里使用：className={styles.someClass}
  

  这样样式就只会局部作用于当前组件，不会污染全局。

内容的提问来源于stack exchange，提问作者user2952265