mejiaj
commented
2 years ago We're using the recommended guidance outlined here https://github.com/dlmanning/gulp-sass#render-your-css
What does your gulp file look like?
Open llimllib opened 3 years ago
mejiaj
commented
2 years ago We're using the recommended guidance outlined here https://github.com/dlmanning/gulp-sass#render-your-css
What does your gulp file look like?
llimllib
commented
2 years ago I left detailed repro instructions in the "reproduction instructions" section above (not being snarky, it's collapsed and you might not have noticed it).
This is with the default gulpfile, the only thing I changed was to update the paths as instructed
amstaker
commented
2 years ago I can confirm and I was able to reproduce the problem. Line 20 definitely should be updated to:
const sass = require("gulp-sass");
Here is the entire file, btw I also think it's sort of silly that the source directory settings are not just standardized and included with the paths ./assets/sass... etc which makes much more sense and will at least allow for an initial compilation. For new and/or inexperienced users it's easy to get this wrong, or at least include a recommended default in the files.
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS SASS GULPFILE
----------------------------------------
*/
const autoprefixer = require("autoprefixer");
const csso = require("postcss-csso");
const gulp = require("gulp");
const pkg = require("./node_modules/uswds/package.json");
const postcss = require("gulp-postcss");
const replace = require("gulp-replace");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const uswds = require("./node_modules/uswds-gulp/config/uswds");
const del = require("del");
const svgSprite = require("gulp-svg-sprite");
const rename = require("gulp-rename");
/*
----------------------------------------
PATHS
----------------------------------------
- All paths are relative to the
project root
- Don't use a trailing `/` for path
names
----------------------------------------
*/
// Project Sass source directory
const PROJECT_SASS_SRC = "./assets/sass";
// Images destination
const IMG_DEST = "./assets/img";
// Fonts destination
const FONTS_DEST = "./assets/fonts";
// Javascript destination
const JS_DEST = "./assets/js";
// Compiled CSS destination
const CSS_DEST = "./assets/css";
// Site CSS destination
// Like the _site/assets/css directory in Jekyll, if necessary.
// If using, uncomment line 106
const SITE_CSS_DEST = "./path/to/site/css/destination";
/*
----------------------------------------
TASKS
----------------------------------------
*/
gulp.task("copy-uswds-setup", () => {
return gulp
.src(`${uswds}/scss/theme/**/**`)
.pipe(gulp.dest(`${PROJECT_SASS_SRC}`));
});
gulp.task("copy-uswds-fonts", () => {
return gulp.src(`${uswds}/fonts/**/**`).pipe(gulp.dest(`${FONTS_DEST}`));
});
gulp.task("copy-uswds-images", () => {
return gulp.src(`${uswds}/img/**/**`).pipe(gulp.dest(`${IMG_DEST}`));
});
gulp.task("copy-uswds-js", () => {
return gulp.src(`${uswds}/js/**/**`).pipe(gulp.dest(`${JS_DEST}`));
});
gulp.task("build-sass", function (done) {
var plugins = [
// Autoprefix
autoprefixer({
cascade: false,
grid: true,
}),
// Minify
csso({ forceMediaMerge: false }),
];
return (
gulp
.src([`${PROJECT_SASS_SRC}/*.scss`])
.pipe(sourcemaps.init({ largeFile: true }))
.pipe(
sass.sync({
includePaths: [
`${PROJECT_SASS_SRC}`,
`${uswds}/scss`,
`${uswds}/scss/packages`,
],
})
)
.pipe(replace(/\buswds @version\b/g, "based on uswds v" + pkg.version))
.pipe(postcss(plugins))
.pipe(sourcemaps.write("."))
// uncomment the next line if necessary for Jekyll to build properly
//.pipe(gulp.dest(`${SITE_CSS_DEST}`))
.pipe(gulp.dest(`${CSS_DEST}`))
);
});
// SVG sprite configuration
config = {
shape: {
dimension: {
// Set maximum dimensions
maxWidth: 24,
maxHeight: 24,
},
id: {
separator: "-",
},
spacing: {
// Add padding
padding: 0,
},
},
mode: {
symbol: true, // Activate the «symbol» mode
},
};
gulp.task("build-sprite", function (done) {
gulp
.src(`${IMG_DEST}/usa-icons/**/*.svg`, {
allowEmpty: true,
})
.pipe(svgSprite(config))
.on("error", function (error) {
console.log("There was an error");
})
.pipe(gulp.dest(`${IMG_DEST}`))
.on("end", function () {
done();
});
});
gulp.task("rename-sprite", function (done) {
gulp
.src(`${IMG_DEST}/symbol/svg/sprite.symbol.svg`, {
allowEmpty: true,
})
.pipe(rename(`${IMG_DEST}/sprite.svg`))
.pipe(gulp.dest(`./`))
.on("end", function () {
done();
});
});
gulp.task("clean-sprite", function (cb) {
cb();
return del.sync(`${IMG_DEST}/symbol`);
});
gulp.task(
"init",
gulp.series(
"copy-uswds-setup",
"copy-uswds-fonts",
"copy-uswds-images",
"copy-uswds-js",
"build-sass"
)
);
gulp.task("watch-sass", function () {
gulp.watch(`${PROJECT_SASS_SRC}/**/*.scss`, gulp.series("build-sass"));
});
gulp.task("watch", gulp.series("build-sass", "watch-sass"));
gulp.task("default", gulp.series("watch"));
gulp.task(
"svg-sprite",
gulp.series("build-sprite", "rename-sprite", "clean-sprite")
);
tinyCoder32
commented
1 year ago Is there any solution yet for this issue?
runarbu
commented
1 year ago @tinyCoder32 I was able to get this working for me by changing:
const sass = require('gulp-sass');
to
const sass = require("gulp-sass")(require('sass'));
as suggested by bsang at https://github.com/uswds/uswds-gulp/issues/36
My gulp an node versions:
gulp -v
CLI version: 2.3.0
Local version: 4.0.2
node -v
v16.19.0 Just a heads up, we developed a new tool USWDS/Compile (hosted on NPM).
USWDS-Gulp isn't under active development anymore.
In order to get
gulp initto work, I had to undo a change from #37, specifically this change.To reproduce:
reproduction instructions
```bash # USWDS doesn't work with a modern node version: https://github.com/uswds/uswds-gulp/issues/40 # so I'll build with an old version I guess. Computers. # # set our local nodejs to an old version capable of installing uswds-gulp asdf local nodejs ref:v14.17.0 npm init npm install --save uswds@latest npm install -g gulp asdf reshim npm install autoprefixer gulp gulp-replace sass gulp-sass gulp-sourcemaps gulp-rename gulp-svg-sprite gulp-postcss postcss postcss-csso uswds uswds-gulp@github:uswds/uswds-gulp --save-dev # copy the gulpfile and browserslist as instructed cp node_modules/uswds-gulp/gulpfile.js . cp node_modules/uswds-gulp/.browserslistrc . # make a bunch of dirs for saving the output mkdir -p dist/{sass,js,css,img,fonts} # Update the gulpfile with paths: ---------------------------- // Project Sass source directory const PROJECT_SASS_SRC = "./dist/sass"; // Images destination const IMG_DEST = "./dist/img"; // Fonts destination const FONTS_DEST = "./dist/fonts"; // Javascript destination const JS_DEST = "./dist/js"; // Compiled CSS destination const CSS_DEST = "./dist/css"; // Site CSS destination // Like the _site/assets/css directory in Jekyll, if necessary. // If using, uncomment line 106 // const SITE_CSS_DEST = "./path/to/site/css/destination"; ---------------------------- gulp init ```And that gulp init outputs:
The only change I had to make to get
gulp initbuilding was rolling line 20 back toconst sass = require("gulp-sass");