Question

我正在尝试使用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角度应用程序中做的更改是添加{I}}文件，我试图将其转换为常规css。

Answer 1

您的配置有点不对，将指南针与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']);

得到sass与grunt一起工作

1 个答案: