SCSS npm is not compiling CSS when I use -w "watch:sass"
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
it froze on the terminal and the update did not work. if I remove the -w than it works perfectly.
{
"name": "nikesh",
"version": "1.0.0",
"description": "Landing page for natours",
"main": "index.js",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"author": "tandel",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}
Instead of writing
"watch:sass": "node-sass sass/main.scss css/style.css -w",
try this one
"sass": "node-sass -w sass/main.scss -o css/style.css --recursive",
here,
-w : means we have to watch the sass/main.scss file
-o : means to need to save the output in the css/style.css file
What fixed my issue is that I finally noticed it was compiling everything into the wrong file when I compiled sass in my terminal. I tweaked my package.json and all the changes I made in my files finally compiled correctly and I was able to see the live-changes.
Related
I've been trying to run a sass project with the following devDependencies and Scripts. When i try to run npm run start, it fails with an error as shown in the screenshot.
package.json file :
"main": "index.js",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"author": "name",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"concat": "^1.0.3",
"live-server": "^1.2.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
And I get the below response when tried to run npm run start
Output Image
I use node v14.17.3, and npm 8.3.0.
Intentional bug from the developer of color.js https://github.com/Marak/colors.js/issues/285 that is being worked on. Pin to 1.4.0 or set a resolution as described in https://github.com/Marak/colors.js/issues/285#issuecomment-1008168237
I have the following package.json however on my environment (windows 10/vs code/vagrant homestead php) compile:development only works if I empty my outputted build.css first, then hit save and trigger the watch. Otherwise the css file never changes. This apparently works on somebody else machine (could be a red herring; trust no-one).
"scripts": {
"autoprefixer": "postcss -u autoprefixer --no-map -r assets/css/*.css",
"compile:production": "node-sass --omitSourceMapUrl true --output-style compressed -o assets/css assets/scss",
"compile:development": "node-sass --omitSourceMapUrl true --output-style expanded -o assets/css assets/scss",
"watch:css": "onchange \"assets/scss\" -- run-s development:css",
"watch:js": "run-s development:js",
"development:css": "run-p compile:development autoprefixer",
"development:js": "rollup -c -w",
"production:css": "run-p compile:production autoprefixer",
"production:js": "rollup -c --compact",
"build": "run-p production:*",
"serve": "run-p watch:*"
},
"devDependencies": {
"#babel/cli": "^7.12.8",
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.12.7",
"#rollup/plugin-babel": "^5.2.2",
"#rollup/plugin-commonjs": "^17.0.0",
"#rollup/plugin-node-resolve": "^11.0.0",
"autoprefixer": "^6.3.6",
"core-js": "^3.8.0",
"fs": "0.0.1-security",
"node-sass": "^4.11.0",
"npm-run-all": "^2.1.1",
"onchange": "^5.2.0",
"postcss-cli": "^6.1.3",
"regenerator-runtime": "^0.13.7",
"rollup": "^2.34.1",
"rollup-plugin-gzip": "^2.5.0",
"rollup-plugin-multi-input": "^1.1.1",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-uglify": "^6.0.4",
"uikit": "^3.6.16"
},
Rewrote the compile scripts as the below to get it to work
"compile:production": "node-sass --omitSourceMapUrl true --output-style compressed assets/scss -o assets/css",
"compile:development": "node-sass -w assets/scss -o assets/css",
I have scss files which I want to convert to css then run autoprefixer, then minify the whole thing.
I came to this code:
"devDependencies": {
"autoprefixer": "^9.7.2",
"cssnano": "^4.1.10",
"node-sass": "^4.13.0",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.23",
"postcss-cli": "^6.1.3",
"watch": "^1.0.2"
},
"scripts": {
"scss": "node-sass -o www/css src/scss",
"prefix": "postcss --use autoprefixer -b 'last 2 versions' < www/css/websiteStyles.css | postcss --use cssnano > www/css/websiteStyles.min.css",
"dev": "npm-run-all scss prefix",
"watch" : "watch 'npm run dev'"
},
When I run npm run watch the script runs infinitely. I don't change anything but the script runs and runs and then runs ageain. What did I do wrong?
I need to run cucumber tests using puppeteer and chai but exclude that scenario that has tag #ignore.
This should be probably set up in package.json under scripts and "test" line. But I don´t know how...
Here is code
{
"name": "cucumber-puppeteer-example",
"description": "Example project on how to use cucumber with puppeteer",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "rimraf build out && tsc",
"build:watch": "rimraf build && tsc -w",
"test": "cucumber-js --require \"build/**/*.js\"",
"test:headless": "cross-env CLS_TEST_HEADLESS=false cucumber-js --require \"build/**/*.js\"",
"test:local": "rimraf out && cross-env CLS_TEST_HEADLESS=false CLS_TEST_URL=http://localhost:4200 cucumber-js --require \"build/**/*.js\"",
"e2e": "ts-node",
"chromium": "ts-node ci-chromium-install.ts linux 641577",
"lint": "tslint --project tsconfig.json -c tslint.json"
},
"devDependencies": {
"#types/chai": "4.1.7",
"#types/cucumber": "4.0.5",
"#types/puppeteer": "1.12.3",
"chai": "4.2.0",
"chromium": "^2.1.0",
"cross-env": "5.2.0",
"cucumber": "5.1.0",
"puppeteer": "1.14.0",
"ts-node": "8.0.3",
"tslint": "^5.16.0",
"tslint-no-unused-expression-chai": "^0.1.4",
"typescript": "3.3.4000",
"unzip": "0.1.11"
}
}
Anyone know how to put somthing like this ~#ingore to ignore all tagged scenarios here to package.json?
Create a separate class with the name cucumberOpts.ts/ js like below:
{
"compiler": "ts:ts-node/register",
"projectName": {
"tags": {
"ui": ["#Ui", "~#Ignore"],
"api": ["#Api", "~#Ignore"]
}
}
}
and use this class in your package.json file like as below:
"scripts": {
"e2e": "cucumber-js ./src/test/features --cucumberOpts.compiler -f node_modules/cucumber-pretty --format json:cucumber-json-report.json --cucumberOpts.projectName.tags.ui"
}
Use #Ignore tag before your scenario which you need to skip and run 'npm run e2e' command from your terminal. This will consider all scenario's which are tagged wit #Ui and will skip all the features which are tagged with #Ignore. If you include both the tags for same scenario, that scenario will be skipped
Add a before step to your hook and return 'pending'
I'm trying to use straight up npm as my build tool.
{
"name": "ang-starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jshintConfig": {
"predef": ["angular"]
},
"scripts": {
"autoprefixer": "postcss -u autoprefixer -r src/assets/css/*",
"scss": "node-sass --output-style compressed -o src/assets/css src/assets/sass/main.scss",
"jshint": "jshint src/app/*.js",
"uglify": "uglifyjs src/app/*.js -o src/assets/js/app.min.js",
"serve": "browser-sync start --server --files 'src/assets/css/, src/assets/js/*.js, **/*.html, !node_modules/**/*.html'",
"watch:css": "onchange 'src/assets/sass/*.scss' -- npm run scss",
"watch:js": "onchange 'src/app/**/*.js' -- npm run jshint && npm run uglify",
"watch:all": "npm-run-all -p serve watch:css watch:js watch:images",
"postinstall": "npm run build:all && npm run watch:all"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.3.7",
"browser-sync": "^2.13.0",
"jshint": "^2.9.2",
"node-sass": "^3.8.0",
"npm-run-all": "^2.3.0",
"onchange": "^2.5.0",
"postcss-cli": "^2.5.2",
"uglify-js": "^2.6.4"
}
}
My folder set up is like.
src
app
controllers
directives
filters
services
assets
css
images
js
sass
templates
index.html
package.json
My problem is with watch:js, I can run jshint and uglify separately and they work but if I run watch:js which uses && to run jshint and then uglify then the uglify doesn't work and it stops at jshint.
Try npm run watch:js instead of npm watch:js.
I had the same issue with npm in angular2. The build-script:
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
wouldn't work - but both commands were running standalone. The run solved it for me.