Materializecss & vue3：如何使用 sass @extend 给文本着色？

Question

我已经使用 npm 在我的 Vue 3.0 项目中安装了 materializecss。
它已导入我的 main.js:

import 'materialize-css/dist/css/materialize.min.css'

一切正常，但是当我想使用@extend 给文本着色时，像这样：

<style lang="scss">
  .a {
      @extend .grey-text, .text-lighten-3;
  }
</style>

我遇到一个错误：

SassError: The target selector was not found.
Use "@extend .grey-text !optional" to avoid this error.

如果我使用“!optional”，则不会应用该规则。
是否可以在 Vue3 中使用 materializecss sass extends？如果是，如何？

Answer 1

您首先必须 import/initialize 包含要扩展的 CSS 规则（选择器）的 Sass 部分。

Vue 组件文件中的

Sass 是有范围的，看不到该文件外部的任何代码（即使您没有在样式标签中使用 scoped 关键字）。这也是 dart-sass 默认情况下的工作方式。

假设 Materialise 安装为 node_module，并且排版部分是您的扩展 class 所在的位置，您可以像这样使用它：

@use 'materialize-css/sass/components/_typography' as *;

a {
  @extend .grey-text, .text-lighten-3;
}

Materializecss & vue3: how to use sass @extend to color text?