Comments (3)
This git seems very quiet so I had to dig in Google and RTFM! I got sass working so I thought I would share the results here for anyone else on the same path.
First, I edited the package.json file (line 27): "gulp-sass": "^5.1.0",
This is the latest version. I figured I'd start with that and work backward if required. Set this package.json line first, otherwise, later, npm will load the old version 3.0.0.
I needed a new version of Node.js. I'm using Homebrew Package Manager ( https://brew.sh ) so ...
Remove the old node brew uninstall node
Add new LTS version (16.14.0) brew install node@16
Test your install with node -v
Restart your terminal.
(Homebrew) If you need to have node@16 first in your PATH:
echo 'export PATH="/usr/local/opt/node@16/bin:$PATH"' >> ~/.zshrc
Check your npm version: npm -v
(8.4.1)
Next, I installed gulp-sass with: npm install sass gulp-sass --save-dev
and tried npm run watch
, but kept getting this error:
Error in plugin "gulp-sass"
Message:
gulp-sass no longer has a default Sass compiler; please set one yourself. Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:
const sass = require('gulp-sass')(require('sass'));
Lots of Googling later, I find out that I need to edit the gulpfile.js to add the line const sass = require('gulp-sass')(require('sass'));
After many hours trying different versions of that line and seeing them not working, I finally had to look at how sass was being called and then realized that because the compiler is no longer part of gulp-sass plugin the existing line (121) .pipe(plugin.sass())
was an empty call. I replaced it with:
.pipe(sass().on('error', sass.logError))
And finally it works!
The unchanged scripts and images functions within watch are also still working.
Browsersync wasn't working before, so I'm not worried about that, but I might look into it at some point.
I consider this a hack because I don't fully understand this git/node/npm/cli environment yet, but I'll include my edited gulpfile here in case someone with more experience might want to have a go at improving on it. I'm not sure how to add it as a fork or if I'm even allowed to. I'll have learn more about GitHub.
Len
from jointswp.
After making through changes, I'm getting error message: Error: Cannot find module 'sass'
Any thoughts?
from jointswp.
After making through changes, I'm getting error message: Error: Cannot find module 'sass'
Any thoughts?
@arelidev You need to install sass
or node-sass
separately if you're using gulp-sass
v5.x.
npm install sass --save-dev
You then need to require sass in your gulpfile as per the migration guide:
https://www.npmjs.com/package/gulp-sass#migrating-to-version-5
const sass = require('gulp-sass')(require('sass'));
Hope that helps!
from jointswp.
Related Issues (20)
- NPM Install issue HOT 1
- NPM Run Watch error - no CSS complied HOT 4
- Autoprefixer Not Working HOT 3
- Foundation 6.6 HOT 19
- Issues Compiling Sass??? Maybe? HOT 4
- How to edit menu items HOT 1
- Autoprefixer issue HOT 2
- Range Slider HOT 1
- Site Logo Won't Render HOT 2
- Discord.js installl error git checkout 11.3-dev HOT 1
- New build on MacOS 11.4 Big Sur throws errors HOT 3
- gulp-sass 5 error HOT 4
- What's the closest alternative? HOT 2
- Foundation is ALIVE! v6.7.1 released and counting. HOT 1
- NPM Run Watch Fails - gulp-sass no longer has a default Sass compiler; please set one yourself HOT 1
- SCSS Compile Error
- Pagination not working in production (was working fine in dev) hosting=NetSol
- JointsWP won't install on Mac or Windows HOT 3
- gulpfile on node11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jointswp.