Geek Answers Handbook

Npm with node-sass and autoprefixer

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

Here is 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 run it. I am using autoprefixer and postcss-cli. The modules were installed locally in the project directory. I think my part of the "script" is incorrect. How would it look right?

+14
source share
3 answers
  { "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 devDependency.

+26
source

Suppose we have a styles.sass file in the sass directory. I used something like this (my package.json):

 { "scripts": { "c":"node-sass sass/styles.sass -o .|postcss styles.css -u autoprefixer -r", "w":"watch 'npm run c' sass" } }

terminal command: npm run w . At this point, each save of the styles.sass file automatically creates a compiled file with the styles.css prefix. I have postcss-cli, node-sass and watch packages installed globally.

+1
source

Sass with Node Js (with auto-prefix)

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 build command: npm run build

0
source

More articles:


All Articles