npm with node-sass and autoprefixer

Question

I use node-sass to compile all my Sass files to a master.css. This works well but now I want to add prefixes. I would like to use only the npm, no Gulp or Grunt.

Here my package.json file:

{   "name": "xxxxxx.com",   "version": "1.0.0",   "description": "",   "watches": {     "sass": "src/scss/**"   },   "scripts": {     "sass": "node-sass src/scss/master.scss -o dist/css/ --style compressed",     "prefix": "postcss --use autoprefixer dist/css/master.css -d dist/css/master.css",     "dev": "rerun-script"   },   "author": "Jan",   "license": "ISC",   "devDependencies": {     "autoprefixer": "^6.3.1",     "browserify": "^13.0.0",     "clean-css": "^3.4.9",     "node-sass": "^3.4.2",     "postcss-cli": "^2.5.0",     "rerun-script": "^0.6.0",     "uglifyjs": "^2.4.10"   } } 

I do not get it to run. I use autoprefixer and postcss-cli. The modules have been installed locally in the project directory. I think my "script" part is false. How would that look right?

Answer 1

 {     "name": "npm-node-sass",     "version": "0.0.1",     "devDependencies": {         "autoprefixer": "^6.3.3",         "browserify": "^13.0.0",         "cssnano": "^3.5.2",         "jshint": "^2.9.1",         "node-sass": "^3.4.2",         "postcss": "^5.0.16",         "postcss-cli": "^2.5.1",         "watch": "^0.17.1"     },     "scripts": {         "prebuild:css": "node-sass --include-path scss src/sass/styles.scss    public/css/styles.css",         "build:css": "postcss --use autoprefixer -b 'last 2 versions' < public/css/styles.css | postcss --use cssnano > public/css/styles.min.css",         "lint": "jshint src/js/*.js",         "build:js": "browserify src/js/main.js > public/js/bundle.js",         "build": "npm run build:css && npm run build:js",         "prebuild:js": "npm run lint",         "build:watch": "watch 'npm run build' src/*"     } } 

You need postcss and postcss-cli as a devDependency.

Answer 2

Sass With Node Js (with Autoprefixer)

npm i -D autoprefixer clean-css-cli node-sass postcss-cli

{   "name": "test",   "version": "1.0.0",   "description": "",   "main": "index.js",   "dependencies": {     "autoprefixer": "^9.5.1",     "browserslist": "^4.5.4",     "clean-css-cli": "^4.3.0",     "node-sass": "^4.11.0",     "postcss": "^7.0.14",     "postcss-cli": "^6.1.2"   },   "devDependencies": {},   "scripts": {     "clean": "rimraf scss",     "compile": "node-sass --output-style=expanded --source-map=true css/scss/main.scss css/scss/main.css",     "prefix": "postcss css/scss/main.css --use=autoprefixer --map=false --output=css/scss/main.css",     "minify": "cleancss --level=1 --source-map --source-map-inline-sources --output css/scss/main.min.css css/scss/main.css",     "dev": "npm run compile -- --watch",     "build": "npm run clean && npm run compile && npm run prefix && npm run minify",     "test": "echo \"Error: no test specified\" && exit 1"   },   "browserslist": [     "last 4 version"   ],   "author": "",   "license": "ISC" } 

Terminal command to build: npm run build