在 React 中使用 Webpack 构建 CSS 文件答案

【问题标题】：Structuring CSS files in React with Webpack在 React 中使用 Webpack 构建 CSS 文件
【发布时间】：2018-03-11 14:01:58
【问题描述】：

我想更好地了解如何构建我的 css 文件。我的文件夹结构是这样的：

-app
|-src
||-components
|||-app.js
||-styles
|||-styles.scss
|-webpack.config

所以我有一个样式表，它将被导入 app.js 并级联到我的其他组件。但是随着我创建更多组件，我的样式表变得很长。每个组件都有样式表是最佳实践吗？另外，我正在使用 webpack 编译并将我的样式表提取到 css 文件中以导入到 index.html 文件中。如果我有多个文件，我假设 webpack 会将它们全部编译成一个 css 文件？

【问题讨论】：

标签： css reactjs webpack

【解决方案1】：

当您的应用程序扩展时，很难维护一个巨大的 CSS 文件，更不用说类名冲突了，因此文件分离通常是一个好主意。我更喜欢每页的 CSS 文件，这取决于你如何将它们分开。至于 webpack loader ，可以把它想象成一个管道，管道设置规则，每个以 .css 结尾的文件都进来并捆绑，所以是的，它会捆绑多个 css 文件。

【讨论】：