让 sass 与 grunt 一起工作

Question

我正在尝试让 sass 与 grunt 一起工作，但有一些事情不是很清楚，即使在阅读了文档之后也是如此。

在我的 gruntfile 中有：

  grunt.loadNpmTasks('grunt-contrib-sass');

  compass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['compass']
  },

  grunt.registerTask('default', ['sass']);

我的问题是我应该在我的样式文件夹和我的 html 文件中创建 scss 或 css 文件，我应该链接到 css 或 scss 文件吗？ 另外，如果我有大量的样式文件，我应该总是手动包含它们中的每一个，还是有更简单的方法，比如在 rails 中，样式文件夹中的每个文件都是自动添加的？

编辑

This is what my project structure looks like，我对默认 yeoman angular 应用程序所做的唯一更改是添加了我试图将其转换为常规 css 的 random.scss 文件。

Answer 1

您的配置有点错误，将 compass 与 sass 混合在一起。看看那个配置：https://github.com/gruntjs/grunt-contrib-watch#examples

当然，您创建编译为 css 的 sass 或 scss 文件。这就是 sass 的用途。在您的 html 中，您包含最终编译的 css 文件。您可以使用像 assetpush 这样的插件，它可以从编译的 css 文件中生成文件中的 html。配置可能如下所示：

grunt.initConfig({
  sass: {
    compile: {
      files: {
        '<%= yeoman.app %>/styles/main.css': ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}']
      }
    }
  },
  assetpush: {
    css: {
        files: {
            "path/to/your.html": ["css/*.css"]
        }
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-assetpush');

grunt.registerTask('default', ['sass', 'assetpush']);