Jak używać kompresora django z wieloma plikami LESS, które importują wspólne pliki?

Question

Zorganizowałem szablony w moim projekcie Django w taki sposób, że każda strona w witrynie zawiera "wspólny" plik LESS, a każda strona może również określać inny plik LESS, który zawiera style specyficzne dla strony.

Problem polega na tym, że potrzebuję specyficznego dla strony pliku LESS, aby móc odnieść się do zmiennych w "zwykłym" pliku LESS. Najprostszym sposobem na zrobienie tego, pomyślałem, było po prostu przeniesienie deklaracji zmiennych do osobnego pliku, który może mieć zarówno pliki LESS, jak i @import.

Jednak aplikacje Django używają oddzielnych katalogów do przechowywania swoich plików statycznych. W końcu, system plików wygląda mniej więcej tak:

- common 
    - static 
     - css 
     - definitions.less 
     - common.less 
- other 
    - static 
     - css 
     - other.less

Zarówno common.less i other.less trzeba importować definitions.less. W przypadku common.less jest to tak proste, jak:

@import "definitions.less"; 

Oto jak słabiej pliki są faktycznie zawarte na stronie, na wszelki wypadek, który pomaga:

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

{% compress css %} 
    <link href="{% static "css/common.less" %}" 
      rel="stylesheet" type="text/less"> 
{% endcompress %} 

Jaki byłby najprostszy sposób zapewnić, że wspólne definicje zmiennych są dostępne dla obu plików LESS? Chcę uniknąć łącząc Im mniej plików na kilka powodów:

• Usuwa korzyści luźne sprzęgła (zdolność do dezaktywacji aplikację bez żadnych skutków ubocznych dla reszty miejscu).
• Dodatkowe dane pobierane dla pojedynczej strony są większe, ponieważ muszą zostać pobrane wszystkie style wszystkich aplikacji.

Answer 1

Robimy to samo w naszej aplikacji - mamy wspólny plik main.less, który jest zawarty w wielu innych mniejszych plikach. Jednak nie napotykamy tego problemu. Myślę, że jest na to kilka sposobów - możesz zmienić lokalizację swoich plików statycznych.

Istnieje ustawienie w django STATICFILES_DIRS - i wygląda na to, że możesz zmienić lokalizację plików statycznych, jeśli chcesz, zamiast zagnieżdżać się w takich aplikacjach. https://docs.djangoproject.com/en/dev/ref/settings/#std:setting-STATICFILES_DIRS

Nasz kod wygląda następująco

{% compress css %} 
{% include "_base_css.html" %} 
{% endcompress %} 

A potem _base_css.html tylko zawiera wszystkie mniejsze pliki, a nasz main.less nadchodzi pierwszy.

## _base_css.html 
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/main.less"> 
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/about.less"> 
<link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}css/dashboard.less"> 

To nie jest dla mnie jasne, z pytaniem co to za błąd, ale wierzę, że Twój wspólny mniej plik musi być włączone, zanim jakikolwiek inny mniejszy plik będzie dostępny. W Twoim fragmencie kodu nie wygląda na to, że je uwzględniasz. Jeśli chodzi o kompresję, nie sądzę, że skompresowanie wszystkich plików CSS w sieci do jednego pliku jest zbyt złe - jest to jedno pobranie za pierwszym razem, a następnie jest w pełni buforowane.

Mam nadzieję, że było to pomocne.