Question

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

以下是HTML的一个片段（实际上是使用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在后者上窒息）。不幸的是，我仍然得到同样的错误。

Answer 1

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

@import 'vendor/materialize'

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

它按预期工作。

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

1 个答案: