Webpack SCSS部分（@import）与网页包文件导入？

我正在构建一个简单的应用程序，并正在设置自己的网页配置，以便更好地了解它的工作原理。目前，我有一个

main.scss

文件（我在其中编写我的所有样式），我正在将它导入我的

index.js

文件（这是我为Webpack设置的入口点）。到目前为止，一切顺利

---

现在我想在Webpack之前将我的SCS分割成单独的、较小的文件（规范化、变量、混合等），我要做的是将每个文件作为SCS的一部分，然后将它们全部导入我的

main.scs

文件。但现在我正在使用Webpack，我想知道是应该继续这样做，还是应该将所有SCSS文件导入Webpack，而完全放弃部分内容？对这一专题的任何澄清都是有益的；我还没有在网上找到多少关于一种方法优于另一种方法的优点。

我在构建一个小的多页应用程序时遇到了这种情况。当我开始基于页面拆分css时，比如说

page-1.scss

，

page-2.scss

，和

page-3.scss

，我想创建一个

common.bundle.css

，其中包含所有页面上使用的css

起初，我有一个

@import'_base'页面-*.scss

文件顶部的代码>声明。我假设

commonchunkplugin

会考虑这些类似的导入，并将它们提取到

common.bundle.css

中。但是我发现

\u base.scss

仍然在每个

页面-*.bundle.css

上重复。在将每个共享部分导入页面的相应条目js文件后，

commonchunkplugin

能够正确地将每个共享部分提取到

common.bundle.css

中

似乎使用SCSS

@import

将所有部分导入到一个css文件中，然后webpack将该文件视为一个依赖项。使用webpack的

import

将每个部分视为

CommonChunkPlugin

能够处理的依赖项

---

因此，在我的一种情况下，通过webpack导入比SCSS导入更可取。不幸的是，我没有关于这个特殊情况的任何相关链接，因为这都是基于个人经验。

以下是我在过去的React项目中使用的设置：

• 从您的

  index.js导入
  main.scss
  

• 在

  main.scss

  中，用于自动化导入新sass文件的过程——很容易忘记将每个新sass文件添加到

  main.scss

  。您的

  main.scs

  看起来像：

main.scss

@import "src/normalize"
@import "src/components/**/*"

Webpack.config.js（Webpack 2+）

这将自动绑定您添加到

src

的新sass文件。使用此设置时，必须最小化sass文件中的

@import

s，因为这将增加生成的CSS文件的总体大小。例外情况是，

@import

ing只包含mixin和变量的文件，因为这些导入不会增加文件大小

当与React这样的框架一起使用时，此设置最有意义，在React中，您将在许多不同的目录（通常在相应组件的目录中）中拥有许多sass文件

 rules: [
    {
        test: /\.scss/,
        enforce: "pre",
        loader: "import-glob-loader"
    },
    // ... other loaders
]