SCSS 部分（@import）与 Webpack 文件导入？答案

【问题标题】：SCSS partials (@import) vs. Webpack file import?SCSS 部分（@import）与 Webpack 文件导入？
【发布时间】：2018-05-23 04:52:22
【问题描述】：

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

现在我想将我的 SCSS 拆分为单独的更小的文件（规范化、变量、mixins 等）。在 Webpack 之前，我要做的是将每个文件都设为 SCSS 部分，然后将它们全部导入我的 @987654323 @ 文件。但是现在我正在使用 Webpack，我想知道是否应该继续这样做，或者是否应该将所有 SCSS 文件导入 Webpack 并完全放弃部分？关于该主题的任何澄清都是有用的；我没有在网上找到太多关于一种方法相对于另一种方法的优势。

【问题讨论】：

标签： webpack sass

【解决方案1】：

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

从您的index.js 导入main.scss
在您的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 文件中的 @imports 最小化很重要，因为这会增加生成的 CSS 文件的整体大小。例外情况是 @importing 文件只包含 mixins 和变量，因为这些导入不会增加文件大小。

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

【讨论】：

【解决方案2】：

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

起初，我在每个 page-*.scss 文件的顶部都有一个 @import '_base'; 声明。我假设CommonsChunkPlugin 会考虑这些类似的导入并将它们提取到common.bundle.css 中。但我发现_base.scss 仍然在每个page-*.bundle.css 中重复出现。在页面各自的入口 js 文件中导入每个共享部分后，CommonsChunkPlugin 能够正确地将每个共享部分提取到 common.bundle.css。

似乎使用 SCSS @import 将所有部分导入到一个 css 文件中，然后 webpack 将该文件视为一个依赖项。使用 webpack 的 import 将每个部分视为 CommonsChunkPlugin 能够作用的依赖项。

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

【讨论】：