Ability to have sass components have separate output css files - gruntjs

Question

I have a Drupal sub-theme set up with the following structure:
├── scss
│   ├── _helpers.scss
│   ├── component
│   │   ├── _dashboard.scss
│   │   ├── _alert.scss
│   │   ├── _badge.scss
│   │   ├── _branding.scss
│   │   ├── _navbar.scss
│   │   └── _user-login-form.scss
│   ├── element
│   │   ├── _header.scss
│   │   └── _main.scss
│   ├── styles.scss
This is my GruntFile.js:
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
},
scripts: {
files: ['js/src/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
nospawn: true,
livereload: 45729
}
},
options: {
livereload: true,
},
},
sass: {
dist: {
files: {
'css/styles.css': 'scss/styles.scss'
}
}
},
jshint: {
myFiles: ['js/src/*.js']
},
concat: {
options: {
separator: ';',
},
dist: {
src: ['../../../libraries/popper.js/dist/umd/popper.js', '../../../libraries/bootstrap/dist/js/bootstrap.js', 'js/src/*.js'],
dest: 'js/scripts.js',
},
},
uglify: {
my_target: {
files: {
'js/scripts.min.js': ['js/scripts.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['watch']);
};
When I make a change in a scss file they compile into styles.css. In addition to this I would also like to have the ability to compile a css for each component.
For example:
├── scss
│   ├── _helpers.scss
....
....
└── components
├── component1
│   ├── component1.css
│   └── component1.scss
└── component2
├── component2.css
└── component2.scss
This way if component2 is only used on 1 page, I will only add that to that 1 page.
How can I set this up in my GruntFile?

Answer 1

Albertski. If I understood correctly you want to generate separate css files with that same scss folder structure. From what I'm seeing, you only need to take the _ (underline) before the name of the file you want and an automatically generated .css file will be generated.
To use this file wherever you want it is how you include it in your pages, for example use the "html--front.tpl.php" and there call your .css or include via hook.