'Using autoprefixer in sass watch mode (NPM)

I want to compile SCSS files and use autoprefixer. npm run build compiles the SCSS file to CSS file. Then I can use this finished CSS file for autoprefixer.

But I have a problem with npm run watch (compiling works). I couldn't find an opportunity to let SASS watch for file changes AND redirect the new file content to autoprefixer.

Here is my package.json first:

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "sass --watch --stop-on-error styles/scss/style.scss style.css",
    "build": "sass --stop-on-error --style=compressed styles/scss/style.scss style.css && npx postcss style.css --replace --use autoprefixer"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss-cli": "^8.3.1",
    "sass": "^1.33.0"
  },
  "browserslist": [
    "> 1%",
    "last 4 versions",
    "not dead"
  ]
}

I already tried sass --watch --stop-on-error styles/scss/style.scss style.css && npx postcss style.css --replace --use autoprefixer. This can't work because the first sass command is never leaving the watch mode so the && npx postcss (...) command is never executed. And I couldn't find a flag like --output-new-file-to-console so I could pipe the content to the next command.

Do you have any suggestions? Thanks.

npmsasspostcssautoprefixer


Solution 1:[1]

I solved my problem by using a Gruntfile.js. There I use grunt-contrib-watch which is executing sass and autoprefixer everytime my SCSS file is changed.

Here's my package.json:

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-jshint": "^3.0.0",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 4 versions",
    "not dead"
  ]
}

Gruntfile.js:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dev: {
                options: {

                },
                files: {
                    'style.css': 'styles/scss/style.scss'
                }
            },
            dist: {
                options: {
                    style: 'compressed',
                    sourcemap: false
                },
                files: {
                    'style.css': 'styles/scss/style.scss'
                }
            }
        },
        autoprefixer: {
            dev: {
                options: {
                    map: true
                },
                files: {
                    'style.css': 'style.css'
                }
            },
            dist: {
                options: {
                    map: false
                },
                files: {
                    'style.css': 'style.css'
                }
            }
        },
        watch: {
            css: {
                files: 'styles/scss/style.scss',
                tasks: [
                    'sass:dev', 
                    'autoprefixer:dev', 
                    'jshint'
                ]
            }
        },
        jshint: {
            all: ['Gruntfile.js', 'js/**/*.js']
        }
    });


    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // default task: watch SASS & autoprefix it & JSHint
    grunt.registerTask('default', ['watch']);

    // build SASS & autoprefix it & JSHint
    grunt.registerTask('build', [
        'sass:dist',
        'autoprefixer:dist',
        'jshint']);
};

Solution 2:[2]

You can use npm-run-all plugin to run two commands in parallel. My example of such use:

"scripts": {
    "sass-watch": "sass --watch scss/main.scss css/main.css",
    "postcss-watch": "postcss css/main.css -u autoprefixer -o css/mainpost.css --watch",
    "watch": "npm-run-all --parallel sass-watch postcss-watch"
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kanka.dev
Solution 2 Densevoid

Related Questions