CODEWITHSUNDEEP
csssassgruntjs
user393964
user393964

Reputation:

Getting sass to work with grunt

I'm trying to get sass working with grunt but there's a few things that aren't very clear, even after reading the documentation.

In my gruntfile I have:

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

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

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

My questions is should I create scss or css files inside my styles folder and in my html file, should I link to css or scss files? Also, if I have a very large amount of style files, should I always include each one of them manually or is there an easier way, like in rails where every file inside the styles folder is added automatically?

EDIT

This is what my project structure looks like, only change I've made from the default yeoman angular app was adding the random.scss file that I'm trying to turn into regular css.

Upvotes: 1

Views: 2122

Answers (1)

hereandnow78
hereandnow78

Reputation: 14434

Your config is kind of wrong, mixing compass with sass. Take a look at that config: https://github.com/gruntjs/grunt-contrib-watch#examples

Of course you create sass or scss files that compile to css. That's what sass is for. In your html you include your final compiled css-files. You could use a plugin like assetpush which could generate the html in your files from the compiled css files. A config maybe could look like this:

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']);

Upvotes: 2

Related Questions