Ionic2 - Styles (css) per component instead of global

Ionic Framework ionic-v3
5

Glad to know :smile:

If you changed your gulpfile with the code I posted, instead use this code:

var customBuildSass = function () {
	buildSass({
		src: 'app/theme/app.+(ios|md|wp).scss',
		dest: 'www/build/css',
		sassOptions: {
			includePaths: [
				'node_modules/ionic-angular',
				'node_modules/ionicons/dist/scss'
			]
		}
	}); // generate files from /app/theme/ (original)
	buildSass({
		src: 'app/pages/**/*.scss',
		dest: 'www/build/css/components',
		sassOptions: {}
	}); // generate files from /app/pages/ (customized)
};

gulp.task('sass', customBuildSass);

Reason

The code from the first post works the first time, but if gulp is watching for changes, only the components scss files will be built again, but the global ones will not, and you will need to execute the gulp build task again or execute ionic serve again.

This happens because the object with options that is passed as argument will override the default options, and because the default options is an object outside the exported function, this will persist for subsequent calls, even without options passed as arguments.

That is, when you customize once, you need to use the default options explicitly the next time if you want to use them (at least the ones you changed with the custom options).

The default options are changed in the line with options = assign(defaultOptions, options); in the file that exports the ionic gulp task for sass https://github.com/driftyco/ionic-gulp-tasks/blob/master/sass-build/index.js.

1 Like