如何通过 Grunt 配置目录递归 Sass 编译任务

Posted 2023-03-03

【中文标题】如何通过 Grunt 配置目录递归 Sass 编译任务

【英文标题】：How to configure directory-recursive Sass compilation task by Grunt

【发布时间】：2013-11-18 11:45:46

【问题描述】：

我是新手，正在学习如何配置coffee、jade和sass编译任务。 我可以成功地为咖啡和玉目录配置编译任务，但我不能为 sass。 我的项目结构如下

.                                                                                                   
├── Gruntfile.coffee                                                                                
├── node_modules                                                                                    
├── package.json                                                                                    
├── sass                                                                                            
│   └── index.sass                                                                                  
└── www

我的 package.json 是

  "name": "grunt-sass-test",
  "version": "0.1.0",
  "devDependencies": 
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.5.0"
  

当 Gruntfile.coffee 出现以下情况时，$ grunt sass 编译 index.css 成功：

module.exports = (grunt) ->
  grunt.initConfig
    pkg: grunt.file.readJSON('package.json')
    sass:
      compile:
        files:[
          "www/index.css": "sass/index.sass"
        ]

但是当如下所示时，>>找不到源文件“index.sass”。显示错误

    sass:
      compile:
        cwd: 'sass'
        src: ['**/*.sass']
        dest: 'www/'
        ext: '.css'

如何配置递归 sass 编译任务？

【参考方案1】：

在 grunt 中，所有递归文件的工作方式都相同：

files: [
  expand: true,
  cwd: "sass/folder",
  src: ["**/*.sass"],
  dest: "dest/folder",
  ext: ".css"
]

expand是做递归的，cwd是启动目录，src是正则表达式匹配**（在文件夹中），dest是编译后保存的文件夹，最后是@987654327 @ 是添加的扩展名

这应该适用于所有使用文件的任务，在 grunt 中。

【讨论】：

天啊，我的错误是“expand”与“expnad”的拼写错误，非常感谢。

确保不要在sass/folder 或dest/folder 之前添加/。由于某种原因，它打破了它。这就是我遇到的问题。