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，这样我们就可以将 SCSS 保存在我们希望 CSS 编译到的位置。然后我们将 compass 编译命令连接到我们的构建脚本中。简化类似于：

compass compile 
mvn clean
mvn build

如果您不使用 maven，您可以做同样的事情，只要在您config.rb为您的 src scss/sass 文件设置正确的路径，然后将目标编译目录设置为您的设计类别/etc

我们所做的其他一些事情是从我们的 pom.xml 中排除 scss 文件，以便 maven 只构建已编译的 css，然后从我们的版本控制系统中删除我们已编译的 CSS 文件。这允许我们的团队对 scss 进行版本控制，而不必担心在 JCR 周围漂浮的 scss 文件什么都不做。

示例工作流程：

  1. 开发人员进行了 sass 更改
  2. 开发人员运行构建脚本
  3. 开发人员检查本地

如果我们不在 Maven 上并且我们使用的是 vlt 之类的东西，那将是

  1. 开发人员进行了 sass 更改
  2. Dev 运行 compass compile（或者此时 compass watch 可能更合适）
  3. 开发人员在这里运行 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 文件放在 sass 中的任何位置jcr_root（无论是全部文件etc/designs还是我们在应用程序的组件中需要特殊的 scss，文件都会编译）。

…………

这有点牵强，但绝对值得。

于 2014-01-10T23:28:51.433 回答
4

没有内置的 SASS 支持，但有对LESS的支持。SASS有一个maven 插件，虽然我没有使用过。有人建议，任何想要这样做的人都可以提出加强日托的要求。

于 2013-05-09T21:05:50.567 回答
2

我意识到这个线程已经很老了，但它在“AEM sass”中排名第一，所以为了人们被引导到这里的利益......

我为 AEM 6.2 创建了一个 Sass 编译器。它还处于早期阶段，但它支持在客户端库中使用“.scss”文件，就像您使用“.less”文件一样。

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

于 2017-04-11T06:36:54.953 回答
0

基于用户@diffa 评论，我想提出grunt-clientlibify作为将包含 SASS 文件的前端项目与 AEM 集成的解决方案。处理 SASS 文件并生成 CSS 文件后，可以将生成的文件馈送到此插件以生成 CRX 包，以选择性地部署到 AEM 实例。请参阅下面的代码示例：

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

October 2017

这SASS Compiler Plugin工作AEM得很好，而且很容易设置。

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

祝你好运！

于 2017-10-29T10:41:14.680 回答