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

Posted 2023-05-07

【中文标题】Materializecss & vue3：如何使用 sass @extend 为文本着色？

【英文标题】：Materializecss & vue3: how to use sass @extend to color text?

【发布时间】：2021-11-21 19:00:22

【问题描述】：

我已经使用 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.

如果我使用“！可选”，则不会应用该规则。 是否可以在 Vue3 中使用 materializecss sass 扩展？如果是，怎么做？

【参考方案1】：

您首先必须导入/初始化包含要扩展的 CSS 规则（选择器）的 Sass 部分。

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

假设 Materialize 是作为 node_module 安装的，并且排版部分是您的扩展类所在的位置，您可以像这样@use 它：

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

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

【讨论】：

谢谢，我试过了，还是一样的错误，用百分比更新了

对不起，我误解了这个问题，经过深思熟虑，我更新了答案。您不需要 %，点应该可以工作。缺少的是您需要先使用 @use 导入的可扩展类。

此处类似概念的证明，我们在 Vue 组件中@使用节点包中的变量：github.com/ahansson/hgrid-css-vue-vite/blob/master/src/…

路径其实是@use 'materialize-css/sass/materialize.scss' as *;但答案是正确的谢谢！我还有一个问题：如果我使用 vue cli 可用的其他 scss 预处理器（node sass 或 smt），不使用 @use 会解决问题吗？

好的，将更新答案。使用正确的路径但是要小心，如果您 @use materialise.scss 您将完整的框架导入到您的组件中。相反，请尝试查找可扩展类所在的特定文件，以避免在每个组件中获得 Materialize 的完整副本。 Node-sass 现在已弃用，不应使用。在 sass-dart 之前，Sass 中的所有内容都可能是全局的，他们使用 @use 和其他技术隔离模块以允许命名空间。在大型项目中更加繁重但也更加稳固。