将 BEM Sass 与 Next 和 Typescript 集成

Question

我正在尝试将静态 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 文件，接下来会根据正在加载的组件将其分块，还是会在第一次加载时全部发送？

Answer 1

1)是的，你可以做到。您可以通过@import 在 main.scss 中积累所有样式，并将其导入应用程序的 "entrypoint" 中。据我了解，您是这样做的，但遇到了一些冻结问题。尝试 this official example of integrating with sass. For your mixins & variables defined in BEM folders and imported in main.scss to be accessible through whole app you should try 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，因此如果您在页面内导入一些单独的样式表，它只会在您加载此样式表时进入这个特定的页面。

Answer 2

所以经过一些挖掘后发现 next-sass 工作正常，不需要任何外部配置。

在全局布局中导入 mains.scss 足以使其工作，但需要注意的一件事是，在 main.scss 中我必须添加局部扩展。

所以我没有 @import "abstracts/functions"; @import "abstracts/functions.scss";

将 BEM Sass 与 Next 和 Typescript 集成

Integrating BEM Sass with Next and Typescript

sass

typescript

next.js