是否可以将 Materialize 中的类导入 SCSS 文件？答案

【问题标题】：Is it possible to import a class from Materialize into an SCSS file?是否可以将 Materialize 中的类导入 SCSS 文件？
【发布时间】：2018-09-17 01:13:41
【问题描述】：

我正在使用 lucy-terms 类的 div 元素中编写一些 HTML。在该元素中，我希望所有 p 元素自动添加 Materialize 的类 flow-text。

这是 HTML 的 sn-p（实际上是使用 django-sass-processor 的 Django 模板：

{% load sass_tags %}

<html>
  <head>
    <!-- Materialize.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <link href="{% sass_src 'stylesheets/terms_of_service.scss' %}" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container lucy-terms">
    <h4 class="center-align">Terms of Use</h4>
    <p class="flow-text">PLEASE NOTE THAT YOUR USE OF AND ACCESS TO OUR SERVICES (DEFINED BELOW) ARE SUBJECT TO THE FOLLOWING TERMS. IF YOU DO NOT AGREE TO ALL OF THE FOLLOWING, YOU MAY NOT USE OR ACCESS THE SERVICES IN ANY MANNER.</p>
    </div>
  </body>
</html>

这里是stylesheets/terms_of_service.scss：

.lucy-terms p {
  // @extend .flow-text;
  font-size: 14px;
}

请注意，@extend .flow-text; 已被注释掉。如果我评论它，我会收到以下错误：

错误：“.lucy-terms p”无法@extend“.flow-text”。未找到选择器“.flow-text”。

如果扩展应该能够失败，请使用“@extend .flow-text !optional”。

在 lucy_web/static/stylesheets/terms_of_service.scss 的第 2 行

基本上，在terms_of_service.scss 中，flow-text 类是没有定义的；它在 Materialise 源代码中定义。所以我必须添加类似（在“Python 伪代码”中）

from materialize import flow-text

是否可以从 SCSS 中的外部“库”导入类？

更新

顺便说一句，这是我尝试过的一些方法，但没有成功。我认为如果 Materialize 源代码和我自己的 CSS 都包含在一个文件中，@extend 可能会起作用。我尝试使用django-compressor 来实现这一点，如下所示：

{% load static %}
{% load sass_tags %}
{% load compress %}

<html>
  <head>
    <!-- Materialize.css -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">-->
    {% compress css %}
    <link href="{% static 'stylesheets/vendor/materialize.css' %}" rel="stylesheet" type="text/css" />
    <link href="{% sass_src 'stylesheets/terms_of_service.scss' %}" rel="stylesheet" type="text/css" />
    {% endcompress %}
  </head>

我指的是本地静态文件中的 Materialize 版本，而不是 CDN 中的版本（因为 Django Compressor 会阻塞后者）。然而不幸的是，我仍然遇到同样的错误。

【问题讨论】：

标签： css sass django-templates

【解决方案1】：

为此，我需要使用 Materialise 的源版本（在 SCSS 中），而不是标准版本（在 CSS 中）。所以，我现在有一个stylesheets/vendor/materialize.scss（连同随附的components 目录），而不是stylesheets/vendor/materialize.css。然后在我自己的 SCSS 中，我可以做到

@import 'vendor/materialize'

.lucy-terms p {
  @extend .flow-text;
}

它按预期工作。

【讨论】：