5

adobe CQ が SASS/SCSS をサポートしているかどうかを確認したいのですが? 誰もそれを経験しましたか？

4

5 に答える 5

5

@diffa は、SASS のネイティブ サポートがないという点で正しいですが、LESS は受け入れられます。LESS ルートに行きたくない場合、SASS 統合はそれほど難しくありません。現在、SASS/Compass [sass テンプレート http://www.archetypecss.com/] を開発スタックと統合して使用しています。

組み立てるために、非常に単純な MVN プロジェクトを使用してアプリケーションを構築します。SCSS の前は、私たちのプロジェクトは次のようなものでした

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

このプロジェクトにフォルダーを追加しました

Maven/sass/config.rb

次にConfig.rb、SCSS ディレクトリとターゲット CSS ディレクトリをetc/designフォルダに設定します。このようにして、CSS をコンパイルしたい場所に SCSS を保持できます。次に、コンパス コンパイル コマンドをビルド スクリプトに接続しました。単純化されたものは次のようなものです:

compass compile 
mvn clean
mvn build

config.rbMaven を使用していない場合は、src scss/sass ファイルの正しいパスを設定し、ターゲット コンパイル ディレクトリをデザイン カテゴリに設定する限り、同じことを行うことができます。/etc

他にも、pom.xml から scss ファイルを除外して、maven がコンパイル済みの css をビルドし、コンパイル済みの CSS ファイルをバージョン管理システムから削除するようにしました。これにより、チームは scss をバージョン管理できるようになり、scss ファイルが JCR の周りに浮かんで何もしないことを心配する必要がなくなりました。

ワークフローの例:

  1. 開発者が sass の変更を行う
  2. 開発者がビルド スクリプトを実行する
  3. 開発者はローカルをチェックします

Maven を使用しておらず、vlt のようなものを使用していた場合、次のようになります。

  1. 開発者が sass の変更を行う
  2. 開発者はコンパス コンパイルを実行します (または、この時点でコンパス ウォッチの方が適している可能性があります)。
  3. Dev はここで vlt/pckmgr/whatever を実行します
  4. ローカルでの開発者チェック

サンプルファイル:

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

お気付きのように、sass および css ディレクトリをjcr_root. これにより、sass ファイルを のどこにでも置くことができますjcr_root(それがすべて入っている場合でもetc/designs、アプリのコンポーネントに特別な scss が必要な場合でも、ファイルはコンパイルされます)。

.........

ちょっと面倒ですが、それだけの価値は間違いなくあります。

于 2014-01-10T23:28:51.433 に答える
4

組み込みの SASS サポートはありませんが、 LESSはサポートされています。私は使用していませんが、SASS 用のMaven プラグインがあります。これを希望する人は誰でも、デイケアの機能強化を求めることができると示唆されています。

于 2013-05-09T21:05:50.567 に答える
0

ユーザー @diffa のコメントに基づいて、SASS ファイルを含むフロントエンド プロジェクトを AEM と統合するソリューションとして、grunt-clientlibifyを提案したいと思います。SASS ファイルが処理されて CSS ファイルが生成されると、結果のファイルをこのプラグインにフィードして、オプションで AEM インスタンスにデプロイする CRX パッケージを生成できます。コード サンプルについては、以下を参照してください。

grunt.initConfig({
  clientlibify: {
    options: {
      // path to your processed SASS files
      cssDir: 'assets/styles/css'
    }
  }
});
于 2016-01-05T08:56:37.370 に答える