У меня возникла проблема с использованием SASS с помощью Live SASS Compiler

Я пытаюсь использовать CSS-фреймворк W3Schools в веб-проекте. Я использую VSCode, Python, Django и расширение компилятора Live SASS. Я хочу, чтобы у меня была возможность использовать один или несколько классов W3Schools в моих собственных классах CSS. Я скачал файл W3 CSS, и он доступен локально на моем компьютере. Я использую @mixins, @include, @use и @extend. Следующий простой тестовый код работает так, как я хочу

_mixins.sass

@use '../../PropertiesApp/static/css/w3'
    
    
$myButtonBackgroundColor: blue
$myButtonTextColor: white

@mixin myColor($myColor: $myButtonBackgroundColor, $myTextColor: $myButtonTextColor)
    background-color: $myColor
    color: $myTextColor
    @extend .w3-btn

base.sass

@use 'mixins' as m

.MyColor
  @include m.myColor

base.html

...
<!-- W3.CSS -->
    <link href="{% static 'css/w3.css' %}" rel="stylesheet">

<!-- My CSS-->
    <link href="{% static 'css/base.css' rel="stylesheet"  %}">

% block content %}{% endblock content %}
...

home.html

{% extends "base.html" %}

{% block content %}

<button class="MyColor" > Push me </button>

{% endblock Content %}

Это дает мне кнопку, оформленную так, как я ожидаю. Также это дает мне base.css, который содержит не только мое правило стиля

.MyColor {
  background-color: blue;
  color: white;
}

это также дает мне в этом базовом файле.css 1921 строку стилей W3Schools CSS.

Итак, мой вопрос в том, как мне просто получить из W3.CSS конкретный класс, который я хочу использовать, например .w3_btn?

Я переименовал w3.css в _w3.css, что должно было предотвратить компиляцию файла в css, но это не имело никакого значения.

Приветствуются любые предложения.

P.S. Я совсем новичок в этом, поэтому, пожалуйста, сделайте ответ простым для понимания, спасибо.

Вернуться на верх