需要帮助生成 bootstrap 5 实用程序

Question

我在一家想要创建自己的实用程序类的公司工作，我必须创建设置才能使其工作。 这是相关详细信息列表

• 所有这些导入都是公司已经在使用的，最后我添加了一小段代码，应该生成诸如 test-25 之类的类，但它没有
• css 编译没有错误，但我的实用程序代码在 css 输出中看不到。
• 我添加了样式来测试 sass 是否未正确导入，例如 { background: red } 确实会使背景变为红色，但下面的实用程序类已从编译的 css 中剥离。

这是我正在使用的代码：

// Bootstrap SCSS

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import 'bootstrap/scss/functions';

// 2. Include remainder of required Bootstrap stylesheets
@import './variables';

// 3. Include any default variable overrides here
@import '../custom';

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';

// 5. Custom mixins
@import './mixins/forms';

// 6. Optionally include any other parts as needed
@import 'bootstrap/scss/utilities';
@import './reboot'; // evi
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/tables';
@import 'bootstrap/scss/forms/floating-labels';
@import 'bootstrap/scss/forms/form-check';
@import 'bootstrap/scss/forms/form-control';
@import './forms/form-range'; // evi
@import 'bootstrap/scss/forms/form-select';
@import 'bootstrap/scss/forms/form-text';
@import 'bootstrap/scss/forms/input-group';
@import 'bootstrap/scss/forms/labels';
@import 'bootstrap/scss/forms/validation';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/transitions';
@import 'bootstrap/scss/dropdown';
@import 'bootstrap/scss/button-group';
@import 'bootstrap/scss/nav';
@import 'bootstrap/scss/navbar';
@import 'bootstrap/scss/card';
@import 'bootstrap/scss/accordion';
@import 'bootstrap/scss/breadcrumb';
@import 'bootstrap/scss/pagination';
@import 'bootstrap/scss/badge';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/progress';
@import 'bootstrap/scss/list-group';
@import 'bootstrap/scss/close';
@import 'bootstrap/scss/toasts';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/tooltip';
@import 'bootstrap/scss/popover';
@import 'bootstrap/scss/carousel';
@import 'bootstrap/scss/spinners';
@import 'bootstrap/scss/offcanvas';
@import 'bootstrap/scss/placeholders';
@import 'bootstrap/scss/helpers';

// my code: 

$utilities: map-merge(
    $utilities, (
    "test": (
      property: opacity,
      values: (
        0: 0,
        25:.25,
        50:.5,
        75:.75,
        100: 1,
      )
    )
  )
);



// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import 'bootstrap/scss/utilities/api';

Answer 1

_utilities.scss 有数百个示例，您可以复制和粘贴，查看这些示例，我发现必须具有 class 属性才能使其工作：

这就是我的代码的工作版本现在的样子：

$newUtilities: map-merge(
    $utilities, (
    "test": (
      property: opacity,
      class: test,
      values: (
        0: 0,
        25:.25,
        50:.5,
        75:.75,
        100: 1,
      )
    )
  )
);

$utilities: map-merge($utilities, $newUtilities);

现在 test-25 等课程确实有效