npmsasspostcssautoprefixer

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.


Solution

  • 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']);
    };