Using Node Sass to generate files

Question

How would I use node-sass to generate these files in my /dist/css/ folder Here are the files I want to generate after compliling:

.css
.css.map
.min.css
.min.css.map

I think I need to put something in the script section of my package.json, but I'm not sure what to put. Your help is greatly appreciated, thank you!

UPDATE: Here's the script I have currently:

"scripts": {
     "compile:sass": "node-sass --watch src/sass -o dist/css"

This generates just a .css file, but I'm still missing the .css.map file, .min.css, and .min.css.map. How do I generate the other 3 files?

Answer 1

I went through the wringer on trying to figure it out... Instead of using node-sass, I decided to use something called Gulp to compile, watch, and generate the files I needed.:

To run this code, you will need to install these dev dependencies:

  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "sass": "1.32"
  }

Here's my solution that allows me to compile, watch and quickly generate a .css, .css.map, .min.css, and .min.css.map file types. Here's the video I watched that helped me.

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass')(require('sass'));
var sourcemaps = require('gulp-sourcemaps');

var styleSRC = './src/sass/**/*.scss';
var styleDIST = './dist/css';

gulp.task('expanded', async function(cb){
    gulp.src(styleSRC)
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'expanded'
        }))
        .on('error', console.error.bind(console))
        .pipe(gulp.dest(styleDIST))
        .on('end', cb);

});

gulp.task('compressed', function(cb){
    gulp.src( styleSRC )
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }))
        .on( 'error', console.error.bind(console) )
        .pipe(rename( { suffix: '.min' } ) )
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(styleDIST))
        .on('end', cb);

});

gulp.task('default', function(){
    gulp.watch(styleSRC).on('change', gulp.series('compressed', 'expanded'));

});