如何在 GruntJS 中处理 SASS/LESS答案

【问题标题】：How to process SASS/LESS in GruntJS如何在 GruntJS 中处理 SASS/LESS
【发布时间】：2014-01-12 15:37:15
【问题描述】：

是否有用于 SASS/LESS 的 grunt-processhtml 版本？
在我的 scss 中，我需要将变量 $icon-font-path（是的，引导程序）设置为不同的值，具体取决于我们是处于开发模式还是正在组装生产代码。

我要做的最后一件事是将变量声明移动到单独的文件（开发和生产版本）并在我的构建过程中替换它们。

我的 Gruntfile：https://github.com/vucalur/django-wibses/blob/master/wibses/yo/Gruntfile.js

【问题讨论】：

【解决方案1】：

当然有办法，使用https://github.com/gruntjs/grunt-contrib-compass 的importPath 选项，这将使Sass 的@import 指令可以找到指定文件夹下的文件。

compass: {
  dev: {
    options: {
      importPath: 'src/sass/icon-path-dev',
    }
  },
  prod: {
    options: {
      importPath: 'src/sass/icon-path-prod',
    }
  }

并且 icon-path-dev 将具有 _filepathvar.scss ，它将您的变量作为

$icon-font-path  : 'dev-font/path';

并且 icon-path-prod 将具有 _filepathvar.scss ，它将您的变量作为

$icon-font-path  : 'prod-font/path';

然后你可以在你的主 scss 文件下使用它，比如

@import "filepathvar";

【讨论】：

我正在做一些真正的自定义（django + yeoman），我将来可能需要 SASS 解析，这就是为什么我不想用文件替换来解决它，但你的解决方案真的优雅，让我摆脱了 django url 中的疯狂 hack。万分感谢！我希望设置工作接近完成，我不需要 SASS 解析，但我仍然很好奇这是否可以直接......