Geek Answers Handbook

Grunt Sass - Numerous CSS Styles

I worked a little on the search, but it seems I could not find a complete answer to this question.

I use grunt to control sass flow, and I was trying to find a way to output multiple CSS styles from grunt.

For instance:

base.scss should have two outputs, the first of which is style.css, which has an extended css style.

The second should be style.min.css, which has a compressed css style.

How do I configure my grunt file for this?

+4
source share
3 answers

You can do this with two configurations, one that displays advanced CSS and the other that produces compressed. Then register your task to run both. Your grunt file should look something like this:

Example

module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // Sass sass: { dev: { // This outputs the expanded css file files: { 'style.css': 'base.scss' } }, prod: { // This outputs the compressed css file options: { outputStyle: 'compressed' // Minify output }, files: { 'style.min.css': 'base.scss' } } } }); grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both }
+5
source

Here's a more complete solution to what gruntfile.js owns, improving what Colin Bacon has already posted. By default, grunt pkg already configured to read package.json in the current directory, so there is no need to write this. You just need to install the jit-grunt plugin (besides the clock and sass plugins, of course) to make my answer work.

 module.exports = function(grunt) { require('jit-grunt')(grunt); grunt.initConfig({ sass: { expanded: { // Target options: { // Target options style: 'expanded' }, files: { // Dictionary of files 'style.css': 'style.scss' // 'destination': 'source' } }, compressed: { // Target options: { // Target options style: 'compressed' }, files: { // Dictionary of files 'style.min.css': 'style.scss' // 'destination': 'source' } } }, watch: { styles: { files: ['**/*.scss'], // which files to watch tasks: ['sass'], options: { spawn: false // speeds up watch reaction } } } }); grunt.registerTask('default', ['sass', 'watch']); };
+1
source

Just add the new manifest file to the styles folder. For example, you usually have main.scss if you create main2.scss and import some files there. It will create a file for each of your manifest files.

If your sass task looks something like this (yeoman web application generator by default):

 sass: { options: { sourceMap: true, includePaths: ['bower_components'] }, dist: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] }, server: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] } }

In the sass files section, read all .scss/.sass and copy them to .tmp/styles . Later, the copy task will move them to dist/styles .

0
source

More articles:


All Articles