Integrating autoprefixer with node-sass using npm

Other Questions NPM
1

I’m trying to set up a workflow using npm to compile my Sass files and add vendor prefixes. Right now I’m using node-sass to compile everything into a master.css file. This works fine but I want to add autoprefixer to the mix. I don’t want to use task runners like Gulp or Grunt.

Here’s what my package.json looks like:

{
  "name": "myproject",
  "version": "1.0.0",
  "scripts": {
    "styles": "node-sass src/styles/main.scss -o dist/css/ --style compressed",
    "prefix": "postcss --use autoprefixer dist/css/main.css -o dist/css/main.css",
    "watch": "npm-watch"
  },
  "devDependencies": {
    "autoprefixer": "^7.0.0",
    "node-sass": "^4.5.0",
    "npm-watch": "^0.3.0",
    "postcss-cli": "^4.0.0"
  }
}

I can’t get it to work properly. I’ve installed autoprefixer and postcss-cli locally in my project folder. I think there might be an issue with my scripts. Can someone help me figure out the correct setup to compile Sass and add prefixes using just npm?

2

I’ve found a solution that might work for you without changing your current setup too much. Instead of running separate commands, you can use a post-css plugin called ‘postcss-node-sass’ which allows you to process Sass files directly with PostCSS.

Here’s how you can modify your package.json:

{
  "scripts": {
    "build": "postcss src/styles/main.scss -o dist/css/main.css --use postcss-node-sass autoprefixer --no-map"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss-cli": "^8.0.0",
    "postcss-node-sass": "^4.1.0"
  }
}

This approach combines Sass compilation and autoprefixing into a single step, simplifying your build process. It’s been quite efficient in my projects, especially when dealing with larger stylesheets.

3

I’ve dealt with this exact scenario in a recent project. Here’s what worked for me:

Instead of separating the Sass compilation and autoprefixer steps, I used the postcss-scss parser along with postcss-sass and autoprefixer plugins. This approach allows you to process Sass and add prefixes in a single command.

Update your package.json like this:

{
  "scripts": {
    "build-css": "postcss src/styles/main.scss -o dist/css/main.css --use postcss-scss postcss-sass autoprefixer --no-map"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss-cli": "^8.0.0",
    "postcss-sass": "^0.5.0",
    "postcss-scss": "^3.0.0"
  }
}

This method streamlines the process and eliminates the need for separate commands. It’s been reliable and efficient for my workflow.

4

hey there! i had a similar issue. try combining the commands with &&. something like:

“build-css”: “node-sass src/styles/main.scss -o dist/css/ --style compressed && postcss dist/css/main.css --use autoprefixer -o dist/css/main.css”

this way it’ll run node-sass first, then autoprefixer. hope this helps!