SCSS 在本地“.scss”文件中包含来自 npm 包的“.classnames”答案

【问题标题】：SCSS include ".classnames" from npm package in your local ".scss" fileSCSS 在本地“.scss”文件中包含来自 npm 包的“.classnames”
【发布时间】：2021-02-07 14:39:46
【问题描述】：

我正在使用Quasar Framework (vue.js)，而不是将帮助类直接写入 HTML，我想在实际的自定义 .class 定义中重用这些类名。

@use、@import 不起作用。这是我的代码：

<template>
  <q-card class=".customclass">
    This should be styled
  </q-card>
</template>

<style lang="scss">
@import url('./node_modules/quasar/src/css/variables.sass'); // <-- not working
@use './node_modules/quasar/src/css/variables.sass'; // <-- not working
.customclass {
  // I want to use those classes: q-pa-md bg-grey-1 text-grey-8 no-shadow border-color-grey-8
  @extend .no-shadow; // not working
}
</style>

我想在我的.classname 中重用这些类：

.q-pa-md
.bg-grey-1
.text-grey-8
.no-shadow
.border-color-grey-8

有解决办法吗？

【问题讨论】：

标签： vue.js sass quasar-framework

【解决方案1】：

对于静态类，请使用不带点的类属性：

  <q-card class="customclass"></q-card>

Quasar 组件通常具有一些内置的样式属性。
在您的情况下，请尝试“flat”属性 - 这将删除 QCard component 的阴影：

  <q-card flat>
    a QCard component without shadow
  </q-card>

如果您仍需要使用某些 Quasar SCSS 类，请在您的模板中附加它们
static or dynamic classes：

  <q-card class="customclass no-shadow">
    static classes
  </q-card>

  <q-card :class="{ 'no-shadow': isActive }">
    dynamic classes
  </q-card>

  <q-card :class="['customclass', { 'no-shadow': isActive }]">
    static + dynamic classes
  </q-card>

目前似乎不可能使用 Quasar SCSS mixins 扩展 SCSS 样式。
我找到了一些功能请求，但都已关闭。

【讨论】：

这不是我想要的，但感谢您提供的信息