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
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
{
"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.
Let's say we have styles.sass file in sass directory. I've 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 saving of styles.sass file will produce compiled and prefixed styles.css file automatically. I have postcss-cli, node-sass and watch packages installed globally.