0

任何人都有使用 dart-sass 和 with 的引导覆盖变量的经验吗？

使用node-sassusing import，我们可以这样做，以覆盖引导程序内部使用的默认$spacer/变量$spacers

$spacer: 1rem !default;
$spacers: (
  0: 0,
  // 2px
  1:
    (
      // 4px
      $spacer * 0.25
    ),
  2: (
    // 8px
    $spacer * 0.5
  ),
  3: $spacer,
  4: (
    // 24px
    $spacer * 1.5
  ),
  5: (
    // 32px
    $spacer * 2
  ),
  6: (
    // 48px
    $spacer * 3
  ),
  7: (
    // 64px
    $spacer * 4
  ),
  8: (
    // 80px
    $spacer * 5
  ),
  9: (
    // 100px
    $spacer * 6.25
  )
);

@import "~bootstrap/scss/bootstrap";

但切换到

@use "~bootstrap/scss/bootstrap";

为了遵循新的 dart sass 标准，打破这个，上面重新声明的变量被忽略

我试过这个，

@use "~bootstrap/scss/bootstrap" with (
  $spacer: 1rem !default;
  $spacers: (...)
);

但这也不起作用，我明白了

ERROR in ./src/client/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation "1rem default * 0.5".
    ╷
622 │ $headings-margin-bottom:      $spacer * .5 !default;
    │                               ^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_variables.scss 622:31  @import
  node_modules/bootstrap/scss/bootstrap.scss 11:9     @use
  src/client/app.scss 2:1                             root stylesheet

我尝试的其他解决方案只会给我其他错误。我仍在学习，但非常坚持这一点，有人有什么想法吗？

我通过 webpack sass-loader 捆绑这个

4

0 回答 0