将 BEM Sass 与 Next 和 Typescript 集成答案

【问题标题】：Integrating BEM Sass with Next and Typescript将 BEM Sass 与 Next 和 Typescript 集成
【发布时间】：2019-12-04 00:11:42
【问题描述】：

我正在尝试将静态 Sass Bem 项目重构为 Typescript NextJS 应用程序。

加载 main.scss 会冻结应用程序

我曾经使用 node-sass 生成一个 CSS 文件，但现在我想加载每个具有相应样式的组件。

当我在组件中加载每个单独的 SCSS 文件时，我收到一个错误，因为我的 SCSS 变量在抽象文件夹中被外部化。

我当前的下一个配置如下：

// next.config.js

```const withSass = require("@zeit/next-sass");

 module.exports = withSass({
 sassLoaderOptions: {}
   });
```

我的 BEM 文件夹结构：

我的问题是：有没有办法将 BEM 结构集成到 Next 应用程序中，还是应该将 SCSS 文件分解为与每个组件对应的文件？

另外，我生成一个 CSS 文件，它将根据正在加载的组件将其分块，还是会在第一次加载时将其全部发送？

【问题讨论】：

标签： typescript sass next.js

【解决方案1】：

1) 是的，您可以这样做。您通过@import 在 main.scss 中累积所有样式，并将其导入应用程序的“入口点”中。据我了解，您是这样做的，但是遇到了一些冻结问题。试试this官方与sass集成的例子。对于在 BEM 文件夹中定义并在 main.scss 中导入以通过整个应用程序访问的 mixins 和变量，您应该尝试sass-resource-loader。您可以尝试以下配置：

const withSass = require("@zeit/next-sass");
const resourcesLoader = {
    loader: "sass-resources-loader",
    options: {
        resources: [
            "./sass/_breakpoint.scss",
            "./sass/_mediaqueries.scss",
            "./sass/_variables.scss"
        ]
    }
};
module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[name]__[local]___[hash:base64:5]"
    },
    webpack: (config, options) => {
        config.module.rules.map(rule => {
            if (
                rule.test.source.includes("scss") ||
                rule.test.source.includes("sass")
            ) {
                rule.use.push(resourcesLoader);
            }
        });
        return config;
    }
});

如果有帮助，我从here 获取。 2）我不确定这一点，但据我了解，Next.js 仅在需要时才提供 js 和 css，因此如果您在页面内导入一些单独的样式表，它只会在您进入此特定页面时加载此样式表。

【讨论】：

答案是逻辑的，但在选择此解决方案时，编译器挂起并没有显示错误：[ wait ] compiling ... > Using external babel configuration > Location: "path/to/project/folder/.babelrc" [ event ] build page: /next/dist/pages/_error span>

【解决方案2】：

所以经过一番挖掘后发现，next-sass 工作得很好，不需要任何外部配置。

在全局布局中导入 mains.scss 就足够了，但需要注意的一点是，在 main.scss 中我必须添加部分扩展。

所以我不是@import "abstracts/functions";而是@import "abstracts/functions.scss";

【讨论】：