如何在 Nextjs Typescript 项目中扩展引导实用程序类答案

【问题标题】：How to extend bootstrap utilities classes in Nextjs Typescript project如何在 Nextjs Typescript 项目中扩展引导实用程序类
【发布时间】：2021-12-17 15:37:10
【问题描述】：

我已经在下一个 js 和 bootstrap 中安装了 sass，我现在可以访问 bootstrap 变量并可以重新分配变量的值，但是当我尝试从 bootstrap 扩展实用程序类时，它给了我错误：

   SassError: The target selector was not found.
Use "@extend .text-center !optional" to avoid this error.
  ╷
9 │     @extend .text-center; //!optional;
  │     ^^^^^^^^^^^^^^^^^^^^
  ╵
  styles\Step0.module.scss 9:2  root stylesheet
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\MyApp\node_modules\next\dist\compiled\css-loader\cjs.js??ruleSet[1].rules[3].oneOf[3].use[1]!C:\MyApp\node_modules\next\dist\compiled\postcss-loader\cjs.js??ruleSet[1].rules[3].oneOf[3].use[2]!C:\MyApp\node_modules\next\dist\compiled\resolve-url-loader\index.js??ruleSet[1].rules[3].oneOf[3].use[3]!C:\MyApp\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[3].oneOf[3].use[4]!C:\MyApp\styles\Step0.module.scss': No serializer registered for SassError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError   
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\MyApp\node_modules\next\dist\compiled\css-loader\cjs.js??ruleSet[1].rules[3].oneOf[3].use[0]!C:\MyApp\node_modules\next\dist\compiled\postcss-loader\cjs.js??ruleSet[1].rules[3].oneOf[3].use[1]!C:\MyApp\node_modules\next\dist\compiled\resolve-url-loader\index.js??ruleSet[1].rules[3].oneOf[3].use[2]!C:\MyApp\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[3].oneOf[3].use[3]!C:\MyApp\styles\Step0.module.scss': No serializer registered for SassError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError

step0.module.scss 是

.welcome {
    @extend .text-center;
    }

【问题讨论】：

标签： sass next.js bootstrap-5

【解决方案1】：

您需要在扩展 Bootstrap 类之前导入它们。这适用于text-center：

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

@import "~bootstrap/scss/utilities/api";

.welcome {
  @extend .text-center;
}

您可能需要添加其他导入，具体取决于您从哪些类扩展。

【讨论】：