How to compile scss to css with node-sass
Maybe this covers your question: How to compile or convert sass / scss to css with node-sass (no Ruby)?
If it's an option for you I would recommend using grunt, it will make things a lot simpler and faster. This grunt plugin is probably the best option: https://www.npmjs.com/package/grunt-contrib-sass
// UPDATE
I followed the tutorial you sent and it's very straightforward. You create a file in your root folder called "package.json" containing the following:
{
"watches": {
"sass": "sass/**"
},
"scripts": {
"sass": "node-sass sass/ -o build/css/",
"dev": "rerun-script"
}
}
You then open the command line in the root folder and run the following:
npm install --save-dev node-sass
The above installs node-sass
You then run:
npm install --save-dev rerun-script
The above creates a watch task so you don't have to rerun node-sass everytime you make changes
And last you run
npm run dev
Done!
Documentation.
If you want automatically compile files then you need to put the flag -w
node-sass -w -r assets/src/scss/ -o assets/dist/css/
My package.json
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
"build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
"build": "npm run build:scss & npm run build:js"
},
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-preset-latest": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"exorcist": "^0.4.0",
"node-sass": "^4.5.0",
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
"babelify"
]
}
}
Actual version of package.json: https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d
The watch
mode in node-sass
doesn't run the first compilation. It supposes that you have already ran node-sass
.
Personally, I use something like this:
{
"scripts": {
"sass": "node-sass -o /path/to/dist /path/to/src",
"sass:watch": "npm run sass && npm run sass -- --watch --recursive"
}
}
And you can use it like this: npm run sass:watch