Trying to create single css file for single sass file (as well as using multiple sass file to one css file) with Grunt

Question

I have a project which is using a standard setup of using multiple sass files and partials which are compiled to a single global css file.

I now need the functionality to also have single sass files map to single css files (these are components/widgets).

So in my final markup a widget will have something like:

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

I've tried a few options in my gruntfile. Current set up looks like this:

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

I've tried the following:

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

As well as:

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'],
        }
    }

I keep getting the error in grunt: Warning: Warning: Unable to write "Webcontent/css/widgets/*.css" file (Error code: ENOENT ).

Surely I don't have to specifiy a destination css file?

Any help much appreciated.

Alexis B. · Accepted Answer · 2019-04-05 15:38:02Z

2

Based on your first solution and on http://ryanchristiani.com/getting-started-with-grunt-and-sass/, your "watched" files should more likely look like this:

(not sure if it really makes a difference, but better give it a try)

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

Otherwise, it is usually easier to build your Gruntfile.js this way:

(only main.scss is compiled and all the other .scss files are @import into this 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

Then in 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'
    }]
  }
};

Hope it could help.

Good Luck'

edited Apr 5, 2019 at 15:38

answered Jul 31, 2015 at 11:21

Alexis B.

1,1078 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexis B. Over a year ago

@lharby Any feedback would be appreciate. Does the quick fix make any difference? Might interest me as well.

lharby Over a year ago

I tried Colin Bacons answer and it does work although I had to slightly change my workflow. So I still want to know if it is possible to create two separate tasks for different folders of files. I am sure this must be a possibility.

Colin Bacon · Accepted Answer · 2015-07-31 11:15:36Z

1

To compile all files within a folder you can do this:

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 
          }
        ]
    }
}

answered Jul 31, 2015 at 11:15

Colin Bacon

15.6k8 gold badges56 silver badges76 bronze badges

7 Comments

lharby Over a year ago

But I still need to map source/sass/main.scss to css/main.css

Colin Bacon Over a year ago

What you mean by map?

lharby Over a year ago

I require the current setup of multiple SASS files to one CSS file, as well as the option to create a single css file for any sass file from the widgets subfolder. So the two should be treated as separate tasks.

Colin Bacon Over a year ago

Only files without a prefix of an underscore can be compiled into a separate CSS file. If your widgets aren't prefixed with an underscore then the code above will compile them all into seperate CSS files. Your main.scss will have @import's of your widgets and will compile to a single file. Give it a try.

lharby Over a year ago

OK thank you. That is working only I have to put all my css files in one folder.

|

Collectives™ on Stack Overflow

Trying to create single css file for single sass file (as well as using multiple sass file to one css file) with Grunt

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related