尝试使用Grunt创建单个CSS文件以匹配单个Sass文件（以及将多个Sass文件合并为一个CSS文件）

Question

我有一个项目，使用多个Sass文件和局部文件的标准设置，这些文件编译成一个全局CSS文件。

现在我需要单个Sass文件映射到单个CSS文件的功能（这些是组件/小部件）。

因此，在我的最终标记中，一个小部件将会有类似于以下内容：

<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/widgets/widget-name.css"/>

我在我的gruntfile中尝试了几个选项。当前的设置如下：

 sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                 "Webcontent/css/site.css": "WebContent/source/sass/site.scss"
            }
        } 
    },
    watch: {
        src: {
            files: ['WebContent/source/sass/*.scss'],
            tasks: ['sass'],
        }
    }

我尝试了以下方法：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                 "Webcontent/css/site.css": "WebContent/source/sass/site.scss",
                 "Webcontent/css/widgets/*.css": "WebContent/source/sass/widgets/*.scss",
            }
        } 
    },

同样也包括：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },

            files: [
                {src: 'WebContent/source/sass/site.scss', dest: 'Webcontent/css/site.css'},
                {src: 'WebContent/source/sass/widgets/*.scss', dest: 'Webcontent/css/widgets/*.css' },
              ],
        } 
    },
    watch: {
        src: {
            files: ['WebContent/source/sass/*.scss', 'WebContent/source/sass/widgets/*.scss'],
            tasks: ['sass'],
        }
    }

我一直在grunt中遇到错误：警告：警告：无法写入“Webcontent/css/widgets/*.css”文件（错误代码：ENOENT）。

我肯定不需要指定目标css文件吧？

非常感谢任何帮助。

- lharby

Answer 1

根据你的第一个解决方案和http://ryanchristiani.com/getting-started-with-grunt-and-sass/，你的“watched”文件更应该像这样：

（不确定是否真的有区别，但最好试一下）

watch: {
  src: {
    files: 'WebContent/source/sass/*.scss',
    tasks: ['sass'],
  }
}

---

否则，按照以下方式构建Gruntfile.js通常更容易：

（只有main.scss被编译，所有其他的.scss文件都被@import到这个main.scss中）

watch: {
  sass: {
    files: './assets/css/sass/*.scss',
    tasks: ['sass', 'cssmin']
  }
},
sass: require( './assets/custom_modules/sass.js' ).task,
cssmin: require( './assets/custom_modules/cssmin.js' ).task

然后在sass.js中

exports.task = {
  dist: {
    options: {
      style: 'expanded',
      lineNumbers: true,
      sourcemap: 'none'
    },
    files: [{
      expand: true,
      cwd: 'assets/css/sass/',
      src: [ 'main.scss' ],
      dest: 'assets/css/',
      ext: '.css'
    }]
  }
};

希望它能有所帮助。

祝你好运。

- Alexis B.

---

@lharby 任何反馈都将不胜感激。这个快速修复有什么区别吗？也可能会引起我的兴趣。 - Alexis B.

我尝试了Colin Bacon的答案，虽然我不得不稍微改变我的工作流程，但它确实有效。所以我仍然想知道是否可以为不同文件夹创建两个单独的任务。我相信这一定是可能的。 - lharby

Answer 2

要编译文件夹中的所有文件，您可以执行以下操作：

sass: {
    dist: {
        files: [
          {
            expand: true, // Recursive
            cwd: "WebContent/source/sass", // The startup directory
            src: ["**/*.scss"], // Source files
            dest: "Webcontent/css", // Destination
            ext: ".css" // File extension 
          }
        ]
    }
}

- Colin Bacon

---

但我仍然需要将source/sass/main.scss映射到css/main.css。 - lharby

什么是映射？ - Colin Bacon

我需要将多个SASS文件的当前设置合并为一个CSS文件，并且提供创建任何widgets子文件夹中的sass文件的单个css文件的选项。因此，这两个任务应该被视为独立的任务。 - lharby

只有没有下划线前缀的文件才能编译成单独的CSS文件。如果您的小部件没有带下划线的前缀，那么上面的代码将把它们全部编译成单独的CSS文件。您的 main.scss 将包含小部件的 @import 并编译为单个文件。试试吧。 - Colin Bacon

好的，谢谢。这个可以工作，但我必须把所有的CSS文件放在一个文件夹里。 - lharby