6

I have node-sass installed and have set the options as in the bottom response on Using node-sass watch option with npm run-script, however, it just doesn't seem to work for me.

This is my package.json file with my latest attempt:

{
  "name": "linkup-paints",
  "description": "NPM for Linkup Paint Supplies website for 2019",
  "version": "1.0.2",
  "main": "index.js",
  "scripts": {
    "start": "run-script-os",
    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*, !styles/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "build-sass": "node-sass styles/main.scss css/main.css",
    "watch-sass": "node-sass -w styles/main.scss css/main.css"
  },
  "author": "dpDesignz",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "run-script-os": "^1.0.3",
    "node-sass": "^4.9.4"
  }
}

So I've tried:

"build:sass": "node-sass -r --output-style compressed styles/main.scss -o css/main.css",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"

and:

"css": "node-sass styles/main.scss -o css/main.css",
"css:watch": "npm run css && node-sass styles/main.scss -wo css/main.css"

and:

"scss": "node-sass --watch styles/main.scss -o css/main.css"

and (as suggested by sidthesloth):

"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"

I run npm i, and once that's complete I run npm start. The browser-sync starts, and watches the file changes, but my css/main.css doesn't compile, or update when I change an .scss file.

I've only just started/learnt how to use NPM, so any help would be much appreciated. I've poured over tutorials and answers (including Using node-sass, Watch and Compile Sass in Five Quick Steps, and Using node-sass to compile Sass files in an npm script) for the past 2 hours with no luck.

How can I get my watch and build to work?

Update

So just an update for anyone looking for this in the future, I didn't understand how scripts worked and didn't realise that my scripts weren't being run parallel to each other. I thought npm start trigerred all my scripts to run, I didn't realise that you had to call all of them. My final package.json file is as follows:

{
  "name": "linkup-paints",
  "version": "1.0.3",
  "description": "NPM for Linkup Paint Supplies website for 2019",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "start": "npm-run-all --parallel browser-sync build-sass watch-sass",
    "browser-sync": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "build-sass": "node-sass styles/main.scss css/main.css",
    "watch-sass": "node-sass -w styles/main.scss css/main.css"
  },
  "keywords": [
    "linkup",
    "2019"
  ],
  "repository": {},
  "author": "dpDesignz",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.3",
    "browser-sync": "^2.26.3",
    "node-sass": "^4.9.4"
  },
  "bugs": {
    "url": "http://support.dpdesignz.co"
  },
  "homepage": "http://www.dpdesignz.co"
}

I ended up adding the npm-run-all script and changing my start args to npm-run-all --parallel browser-sync build-sass watch-sass as I don't need cross-os compatability with the old run-script-os args I had previously. I also put the -w (--watch) arg in the browser-sync line to cause the created .css files to trigger a sync as the build actually replaces the .css file, not "changes" it as required by browser-sync by default.

halfer
  • 19,824
  • 17
  • 99
  • 186
dpDesignz
  • 1,909
  • 10
  • 34
  • 70
  • If you are going to link external tutorials you have "tried" then I might also help to actually show what you implemented that the tutorials showed you to do and what exactly does not work from following those instructions. It does not appear that anything in your question shows you following any of the instructions you are referencing. So perhaps a bit more detail about what is wrong with each one of them. In that way, nobody wastes theirs or your time by simply reiterating something you believe does not work already. – Neil Lunn Nov 02 '18 at 08:10
  • @NeilLunn as noted at the top of my question, I've set the options as in the bottom response of that first link but it's not seeming to do anything. Same with all the other links I posted. I've tried all of them and browser-sync starts, but the node-sass stuff doesn't seem to do anything. – dpDesignz Nov 02 '18 at 08:12
  • To be clear, you're being asked to be "more specific" about what is not working and what you actually tried. I don't see anything here, and questions asking for a "full tutorial" tend to get closed as too broad. So it was simply a "fair warning" that there are things in your question that need attending to. – Neil Lunn Nov 02 '18 at 08:13
  • @NeilLunn thanks I've added some examples of what I've tried and what's not happening – dpDesignz Nov 02 '18 at 08:20

1 Answers1

5

These are the two NPM scripts that I use to either build or watch SCSS files using node-sass:

"build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css"
"watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css"

Hope this works for you

sidthesloth
  • 1,399
  • 1
  • 11
  • 19
  • thanks I've tried that, but it seems to have put my browser-sync in a refresh loop and my `main.css` file still hasn't compiled. Any ideas? I've updated my question with what I've tried so far. – dpDesignz Nov 02 '18 at 08:28
  • is there any chance I could see your entire `package.json` file to see how you set yours up please? – dpDesignz Nov 02 '18 at 08:44
  • `"scripts": { "start": "npm run build && npm run watch", "build": "npm run build-sass", "serve": "nodemon dist/server.js", "watch": "concurrently -k -p \"[{name}]\" -n \"Sass,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-sass\" \"npm run serve\"", "build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css", "watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css" }` – sidthesloth Nov 05 '18 at 04:12