webpack - SCSS 部分(@import)与 Webpack 文件导入？

Question

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

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

Answer 1

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

• 从您的index.js

  导入main.scss

• 在您的 main.scss 中使用 import-glob-loader自动化导入新 sass 文件的过程——很容易忘记将每个新 sass 文件添加到 main.scss。你的 main.scss 看起来像这样:

ma​​in.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 文件的整体大小。异常(exception)是 @importing 只包含混入和变量的文件，因为这些导入不会增加文件大小。

这种设置在与 React 这样的框架一起使用时最有意义，在 React 中，您会在许多不同的目录(通常在各自组件的目录中)中有许多 sass 文件