使用Webpack在React中构建CSS文件

Question

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

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

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

Answer 1

当你的应用程序扩展时，很难维护一个庞大的CSS文件，更不用说类名冲突了，所以文件分离通常是一个好主意。 我更喜欢每页的CSS文件，有点由你如何分开它们。 对于webpack加载器，将其视为一个管道，管道设置规则，每个以.css结尾的文件都会进入并捆绑，所以是的，它会捆绑多个css文件。