时间戳

首页 > 解决方案 > 将 BEM Sass 与 Next 和 Typescript 集成

typescript - 将 BEM Sass 与 Next 和 Typescript 集成

问题描述

我正在尝试将静态 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 文件夹结构：

SASS 文件夹结构

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

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

标签： typescriptsassnext.js

解决方案

1）是的，你可以这样做。您通过@import 在 main.scss 中累积所有样式，并将其导入应用程序的“入口点”中。据我了解，您是这样做的，但是遇到了一些冻结问题。试试这个与 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;
    }
});

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

推荐阅读