Jak używać zmiennych w różnych mniejszych plikach?

Question

Załóżmy, że oddzielam mniej plików na wiele mniejszych plików, aby ułatwić ich porządkowanie. Oto mój repozytorium:

/reset.less 
/variables.less 
/mixins.less 
/main.less 
/styles.less 

styles.less właśnie importując inne pliki:

@import "reset.less"; 
@import "mixins.less"; 
@import "variables.less"; 
@import "main.less"; 

Jednak, gdy dodam jakieś kody do main.less i użyj @ skład którego kolor jest zdefiniowany w variables.less. Wyświetla Name Error: variable @line-color is undefined i nie mogę go skompilować - używam PHPStorm z mniejszą wtyczką.

Czy możesz mnie zasugerować?

Answer 1

Musisz zaimportować swoje zmienne .less do wszystkich plików, które używają zmiennych.

Edit:

Musisz skompilować tylko swoją style.less. Nie możesz skompilować main.less, ponieważ nie zna zmiennych.less, ale nie chcesz main.CSS tak czy inaczej, prawda?
Powinieneś uzyskać poprawny plik style.css, który jest (chyba) jedynym potrzebnym plikiem css.

Answer 2

mogę go rozwiązać, wykonując następujące czynności w PHPstorm:

• Otwórz Preferencje ...
• w menu Narzędzia> Obserwowane Plik> Mniej (Konfiguruj)
• Sprawdź "Tylko pliki korzeniowe track"
• Zmień "Ścieżki wyjściowe do odświeżenia" na ../css/$FileNameWithoutExtension$.css (z przodu dodaje się "../css/" - w zależności od folderu, w którym mają być zapisywane pliki css)
• (W tym momencie możesz chcieć sprawdzić, czy to już spełnia twoje zadanie. Jeśli nie, to prowadzić do następnego kroku ...)
• Innymi Ustawienia> MNIEJ Profile> (Twój profil) (Konfiguruj)
• Zdefiniuj „mniej katalogu źródłowego”: /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less (w zależności, który folder zawiera .less plików)
• zdefiniować "include file path": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less/style.less (nazwa pliku w zależności od których .less plik kompiluje inne pliki .less)
• Add "katalog wyjściowy CSS" wybierając folder chcesz napisać (zminimalizowane) Pliki CSS
• Włącz Kompresuj wyjście CSS w razie potrzeby

Wskazówka: Jeśli Compress wyjście CSS jest włączona, oznacza to, że kod zostanie skompresowany za każdym kliknięciu prawym przyciskiem myszy na .less -file i naciśnij „Kompilacja CSS”. Domyślnie dane wyjściowe nie będą kompresowane przy każdej modyfikacji dokonanej w pliku-.less.Jeśli chcesz skompresować CSS razu,

• Install mniej-plugin-clean-css pomocą następującego polecenia w Terminalu: sudo npm install -g less-plugin-clean-css
• Następnie przejdź do Narzędzia> Obserwowane Plik> Mniej (configure) i zmień "Argumenty" na --clean-css --no-color $FileName$ (dodano "--clean-css" z przodu). Teraz skompiluje twój CSS automatycznie podczas kodowania. Nie będziesz już musiał kompilować ręcznie.