代码之家 › 专栏 › 技术社区 › RooksStrife

导入自定义混音失败-Angular 15-Bootstrap 5

scss-mixins bootstrap-5 sass webpack angular

0

RooksStrife · 技术社区 · 3 年前

我认为这可能是一个Webpack或angular.json的东西。

我在主题文件夹下创建了一个_mixins.scss文件。此外,在文件夹中,我导入了custom.css文件中的mixin文件。然后在main styles.scss中导入custom.css。然后在一个角度组件内部,我使用@include来拉入mixin,但得到了一个错误。我在angular.json文件中也有标记在那里的样式文件。

我还尝试过切换到@use并将mixin直接导入styles.scss=no dice。

带有示例链接的类似stackoverflow问题: Angular not importing mixin

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  â·
7 â     @include card-hover-effect();

现在,如果我将mixin直接导入到组件的scss文件中,并在mixin文件中导入_variables.css,这一切都可以,但并不理想。

我知道组件是封装的,但你可以访问全局样式和变量。。。为什么不混合?那么,如何获得全局mixin并像组件中的变量一样访问它们,而不将它们直接导入组件的scss文件中呢?

Mixin代码:

@mixin card-hover-effect() {
  transition: all 0.3s;
  &:hover {
    cursor: pointer;
    transform: scale(1.02);
    box-shadow: $card-box-shadow;
  }
}

0 回复 | 直到 3 年前

1

0

H3AR7B3A7 3 年前

你可能是对的,这是一个 angular.json -因为我认为代码中没有问题。

可能是您需要向自己添加包含mixin的文件夹的路径 angular.json 的 stylePreprocessorOptions 。

它看起来像这样:

"architect": {
  "build": {
    "options": {
      // ...
      "styles": [
        "src/styles.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/theme"
        ]
      },
    },
  },
}