Adobe CQ i SASS/SCSS

Question

Chciałbym zapytać, czy Adobe CQ obsługuje SASS/SCSS? Czy ktoś ma z tym doświadczenie?

Answer 1

@diffa ma rację, ponieważ nie ma natywnego wsparcia dla SASS, jednak LESS jest akceptowane. Jeśli nie chcesz iść na trasę LESS, integracja SASS nie jest trudna. Obecnie korzystamy z integracji SASS/Compass [z szablonem sass http://www.archetypecss.com/] z naszym pakietem rozwojowym.

Aby poprawić wygląd, używamy bardzo prostego projektu MVN do zbudowania naszej aplikacji. Przed SCSS nasz projekt wyglądał mniej więcej tak

Maven/ 
    bundle/ 
    /path/to/our/java 
    content/ 
    /path/to/our/jcr_root (apps/etc) 

Dodaliśmy folder do tego projektu

Maven/ Sass/ config.rb

Wtedy w naszym Config.rb możemy ustawić katalog docelowy SCSS i CSS katalogi do naszego folderu etc/design, więc w ten sposób możemy utrzymać nasz SCSS tam, gdzie chcemy, aby nasz CSS się kompilował. Następnie podpięliśmy komendę kompasu kompasu do naszego skryptu kompilacji. Który jest cos takiego jak uproszczone:

compass compile 
mvn clean 
mvn build 

Jeśli nie używasz Maven, można zrobić to samo, o ile w swojej config.rb ustawić prawidłowe ścieżki dla src SCSS/plików Sass a następnie ustawić docelowy katalog kompilacji do kategorii projektu w /etc

Innymi czynnościami, które zrobiliśmy, jest wykluczyć pliki scss z naszego pliku pom.xml, aby użytkownik mógł po prostu skompilować skompilowany plik css, a następnie usunąć nasze skompilowane pliki CSS z naszego systemu wersjonowania . Pozwala to naszemu zespołowi na wersję scss, nie martwiąc się o pliki scss pływające wokół naszego JCR, nie robiąc nic.

Przykład Workflow:

1. Dev sprawia Sass zmienia
2. Dev biegnie zbudować skrypt
3. Dev sprawdza lokalny

jeśli nie byliśmy na Maven i używaliśmy coś podobnego VLT to byłby podobny do:

1. Dev sprawia Sass zmienia
2. Dev działa kompas kompilacji (lub w tym momencie kompas zegarek może być bardziej odpowiednie)
3. Dev biegnie VLT/pckmgr/cokolwiek tutaj
4. Dev kontrole lokalnej

przykładowy plik :

maven/ 
    bundle/ 
    /path/to/javas 
    content/ 
    /src/main/content/jcr_root/ 
     etc/designs/myproj 
     /css 
      main_styles.sass <= src 
      main_styles.css <= compiles to 
    maven/ 
    config.rb 
     sass_dir = ../content/src/main/content/jcr_root 
     css_dir = ../content/src/main/content/jcr_root 

Jeśli zauważysz, ustawić Sass i cSS katalogów być jcr_root. To pozwala nam umieszczać pliki sass w dowolnym miejscu w jcr_root (czy to wszystko w etc/designs lub potrzebowaliśmy specjalnych scss w komponencie w aplikacjach, pliki się skompilują).

.........

To trochę zahaczyć, ale na pewno warto.

Answer 2

Brak wbudowanej obsługi SASS, ale istnieje support dla LESS. Dla SASS istnieje maven plugin, chociaż tego nie używałem. Zostało suggested, że ktokolwiek tego chciał, może zgłosić prośbę o przedłużenie opieki.

Answer 3

W oparciu o komentarz użytkownika @diffa, chciałbym zaproponować grunt-clientlibify jako rozwiązanie do zintegrowania projektu front-end zawierającego pliki SASS z AEM. Po przetworzeniu plików SASS i wygenerowaniu plików CSS, pliki wynikowe można przekazać do tej wtyczki, aby wygenerować pakiet CRX, który zostanie opcjonalnie wdrożony w instancji AEM. Zobacz poniżej próbki kodu:

grunt.initConfig({ 
    clientlibify: { 
    options: { 
     // path to your processed SASS files 
     cssDir: 'assets/styles/css' 
    } 
    } 
}); 

Answer 4

Zdaję sobie sprawę, ten wątek jest dość stary, ale to jest pierwszy ranking „AEM Sass”, więc w interesie osób skierowanych jest tutaj ...

stworzyłem Sass kompilator dla AEM 6.2. To wciąż wczesne dni, ale zapewnia obsługę plików ".scss", które będą używane w bibliotekach klienckich, podobnie jak w przypadku plików ".less".

https://github.com/mickleroy/aem-sass-compiler

Answer 5

October 2017

Ten SASS Compiler Plugin dla AEM pracował bardzo dobrze i to było bardzo łatwe w konfiguracji.

https://github.com/mickleroy/aem-sass-compiler

Powodzenia!