
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@mr-hope/gulp-sass
Advanced tools
Sass plugin for gulp.
Since sass introduce a new compile
api in v1.45.0 (which use Promise
instead of callback
when async), we are upgrading to V3 to use this new API.
So V3 requires a minimum sass version of 1.45.0
.
Due to sync
is faster than async
, users should use sync
as the first choice, we marked async
ones with Async
prefix in V3.
So we are providing:
legacy
and legacyAsync
(used to be sassSync
and sass
).sass
and sassAsync
LegacySassOptions
and LegacySassAsyncOptions
for old apis, together with SassAsyncOptions
and SassOptions
for new apis.GulpSass
, GulpSassAsync
, LegacyGulpSass
, LegacyGulpSassAsync
for sass
, sassAsync
, legacy
, legacyAsync
We strongly recommend you to use this plugin instead of gulp-sass or gulp-dart-sass.
gulp-sass is still using node-sass by default, and it has been deprecated for quite a long while.
Also, node-sass will take a long time to built during installation.
gulp-dart-sass is just forking the above project and changed it's deps, while it:
It's a totally rewrite version in typescript. It has:
compile
apipnpm add -D @mr-hope/gulp-sass
or
yarn add -D @mr-hope/gulp-sass
or
npm i -D @mr-hope/gulp-sass
You should use sass
to synchronously transform your sass code in to css:
const { dest, src, watch } = require("gulp");
const { sass } = require("@mr-hope/gulp-sass");
const build = src("./styles/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(dest("./css"));
exports.build = build;
exports.watch = watch("./styles/**/*.scss", build);
You can also compile asynchronously:
const { dest, src, watch } = require("gulp");
const { sassAsync } = require("@mr-hope/gulp-sass");
const build = src("./styles/**/*.scss")
.pipe(sassAsync().on("error", sassAsync.logError))
.pipe(dest("./css"));
exports.build = build;
exports.watch = watch("./styles/**/*.scss", build);
Note that we provide a useful function called logError
on these 2 transform functions to let you print errors gracefully.
See the demo above for usage.
Note that synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers
package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber
class to the fiber
option:
const { dest, src, watch } = require("gulp");
const { sass } = require("@mr-hope/gulp-sass");
const fiber = require("fibers");
const build = src("./styles/**/*.scss")
.pipe(sass({ fiber }).on("error", sass.logError))
.pipe(dest("./css"));
exports.build = build;
exports.watch = watch("./styles/**/*.scss", build);
You should pass in options just like you would for Dart Sass compileString
api. They will be passed along just as if you were using sass
. We also export SassOption
and SassAsyncOption
interface in declaration files.
For example:
exports.build = src("./styles/**/*.scss")
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(dest("./css"));
Or this for asynchronous code:
exports.build = src("./styles/**/*.scss")
.pipe(
sassAsync({ outputStyle: "compressed" }).on("error", sassAsync.logError)
)
.pipe(dest("./css"));
@mr-hope/gulp-sass
can be used in tandem with gulp-sourcemaps to generate source maps for the Sass to CSS compilation. You will need to initialize gulp-sourcemaps prior to running @mr-hope/gulp-sass
and write the source maps after.
const sourcemaps = require("gulp-sourcemaps");
exports.build = src("./styles/**/*.scss")
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(dest("./css"));
By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a path relative to the gulp.dest()
destination in the sourcemaps.write()
function.
const sourcemaps = require("gulp-sourcemaps");
exports.build = src("./styles/**/*.scss")
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(sourcemaps.write("./maps"))
.pipe(dest("./css"));
Only Active LTS and Current releases are supported.
You should use legacy
to synchronously transform your sass code in to css:
const { dest, src, watch } = require("gulp");
const { legacy } = require("@mr-hope/gulp-sass");
const build = src("./styles/**/*.scss")
.pipe(legacy().on("error", legacy.logError))
.pipe(dest("./css"));
exports.build = build;
exports.watch = watch("./styles/**/*.scss", build);
You can also compile asynchronously:
const { dest, src, watch } = require("gulp");
const { legacyAsync } = require("@mr-hope/gulp-sass");
const build = src("./styles/**/*.scss")
.pipe(legacyAsync().on("error", legacyAsync.logError))
.pipe(dest("./css"));
exports.build = build;
exports.watch = watch("./styles/**/*.scss", build);
Note that we provide a useful function called logError
on these 2 transform functions to let you print errors gracefully.
See the demo above for usage.
Note that synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers
package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber
class to the fiber
option:
const { dest, src, watch } = require("gulp");
const { legacyAsync } = require("@mr-hope/gulp-sass");
const fiber = require("fibers");
const build = src("./styles/**/*.scss")
.pipe(legacyAsync({ fiber }).on("error", legacyAsync.logError))
.pipe(dest("./css"));
exports.build = build;
exports.watch = watch("./styles/**/*.scss", build);
You should pass in options just like you would for Dart Sass. They will be passed along just as if you were using sass
. We also export LegacySassOption
and LegacySassAsyncOption
interface in declaration files.
LegacySassOption
and LegacySassAsyncOption
is just like LegacyOptions<'sync'>
and LegacyOptions<'async'>
in sass
except for the data
and file
options which are used by @mr-hope/gulp-sass
internally.
For example:
exports.build = src("./styles/**/*.scss")
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(dest("./css"));
Or this for asynchronous code:
exports.build = src("./styles/**/*.scss")
.pipe(
sassAsync({ outputStyle: "compressed" }).on("error", sassAsync.logError)
)
.pipe(dest("./css"));
@mr-hope/gulp-sass
can be used in tandem with gulp-sourcemaps to generate source maps for the Sass to CSS compilation. You will need to initialize gulp-sourcemaps prior to running @mr-hope/gulp-sass
and write the source maps after.
const sourcemaps = require("gulp-sourcemaps");
exports.build = src("./styles/**/*.scss")
.pipe(sourcemaps.init())
.pipe(legacy({ outputStyle: "compressed" }).on("error", legacy.logError))
.pipe(sourcemaps.write())
.pipe(dest("./css"));
By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a path relative to the gulp.dest()
destination in the sourcemaps.write()
function.
const sourcemaps = require("gulp-sourcemaps");
exports.build = src("./styles/**/*.scss")
.pipe(sourcemaps.init())
.pipe(legacy({ outputStyle: "compressed" }).on("error", legacy.logError))
.pipe(sourcemaps.write("./maps"))
.pipe(dest("./css"));
@mr-hope/gulp-sass
is a very light-weight wrapper around Dart Sass. Because of this, the issue you're having likely isn't a @mr-hope/gulp-sass
issue, but an issue with one those projects or with Sass as a whole.
If you have a feature request/question how Sass works/concerns on how your Sass gets compiled/errors in your compiling, it's likely a Dart Sass issue and you should file your issue with one of those projects.
If you're having problems with the options you're passing in, it's likely a Dart Sass and you should file your issue with one of those projects.
We may, in the course of resolving issues, direct you to one of these other projects. If we do so, please follow up by searching that project's issue queue (both open and closed) for your problem and, if it doesn't exist, filing an issue with them.
FAQs
Gulp plugin for sass
The npm package @mr-hope/gulp-sass receives a total of 199 weekly downloads. As such, @mr-hope/gulp-sass popularity was classified as not popular.
We found that @mr-hope/gulp-sass demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.