Question

我正在构建一个简单的应用程序，并且正在设置我自己的Webpack配置，以便更好地了解它的工作原理。目前，我有一个main.scss文件（我写的所有样式），我将其导入我的index.js文件（这是我设置的入口点）对于Webpack）。到目前为止，非常好。

现在我想将我的SCSS拆分成单独的，较小的文件（规范化，变量，混合等等）。在Webpack之前，我要做的是让每个文件都成为SCSS的一部分然后将它们全部导入到我的文件中main.scss个文件。但是现在我正在使用Webpack，我想知道我是否应该继续这样做，或者我是否应该将所有SCSS文件导入到Webpack而不是完全放弃部分？对该主题的任何澄清都是有用的;我还没有在网上找到一种方法优于另一种方法的优点。

Answer 1

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

从main.scss

index.js

在main.scss使用import-glob-loader自动执行导入新sass文件的过程中，很容易忘记将每个新的sass文件添加到main.scss 。您的main.scss看起来像是：

<强> main.scss

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

Webpack.config.js （Webpack 2 +）

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

这会自动捆绑您添加到src的新sass文件。使用此设置时，最小化sass文件中的@import非常重要，因为这会增加生成的CSS文件的总体大小。例外@import只包含mixins和变量的文件，因为这些导入不会添加到文件大小。

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

Answer 2

我在我正在构建的小型多页面应用程序中遇到了这种情况。当我开始根据页面分割css时，让我们说page-1.scss，page-2.scss和page-3.scss，我想创建一个{{1}其中包含所有页面上使用的CSS。

首先，我在每个common.bundle.css文件的顶部都有一个@import '_base';声明。我假设page-*.scss会考虑这些类似的导入并将其提取到CommonsChunkPlugin。但我发现每个common.bundle.css仍然存在_base.scss重复。在页面的相应条目js文件中导入每个共享部分之后，page-*.bundle.css能够将每个共享部分正确地提取到CommonsChunkPlugin中。

似乎使用SCSS common.bundle.css将所有部分导入到一个css文件中，然后webpack将该文件视为一个依赖项。使用webpack＆＃39; @import将每个部分视为import能够作用的依赖关系。

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

SCSS partials（@import）与Webpack文件导入？

2 个答案: