`October 2017`

Question

我想问一下adobe CQ是否支持SASS / SCSS？有人有经验吗？

Answer 1

@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 / 上海社会科学院/ config.rb

然后在我们的Config.rb中，我们将SCSS目录和目标CSS目录设置为我们的etc/design文件夹，这样我们就可以将SCSS保存在我们希望CSS编译到的位置。然后我们将compass compile命令连接到我们的构建脚本中。简化的有点像：

compass compile 
mvn clean
mvn build

如果您不使用maven，只要在config.rb中为src scss / sass文件设置正确的路径然后将目标编译目录设置为您的设计，就可以执行相同的操作/etc

中的类别

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

示例工作流程：

Dev进行了改变
Dev运行构建脚本
Dev检查本地

如果我们不在Maven上，而且我们使用类似vlt的东西，那就像

Dev进行了改变
Dev运行罗盘编译（或者此时罗盘手表可能更合适）
Dev运行vlt / pckmgr /无论在哪里
Dev检查本地

示例文件：

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，文件都将编译）。

.........

它有点挂钩，但绝对值得。

Answer 2

没有内置的SASS支持，但support有LESS。 SASS有一个maven plugin，虽然我还没有用过它。任何人都希望这可以suggested提出加强日托要求。

Answer 3

我意识到这个帖子已经很老了，但它在“AEM sass”中排名第一，所以为了引导人们的兴趣......

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

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

Answer 4

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

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

Answer 5

`October 2017`

SASS Compiler Plugin的{{1}}效果非常好，设置非常简单。

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

祝你好运！

Adobe CQ和SASS / SCSS

5 个答案:

`October 2017`