I’m trying to reference an image in a page bundle in a custom class, which I want to compile with the rest of the CSS.
Image is stored in:
/content/work/project-name/header/custom-header.jpg
CSS is
.header-for-project {
background: url('../../content/work/project-name/header/custom-header.jpg');
}
SCSS is stored in /src/sass
Error I get upon compiling when I view the image in the web inspector is:
Cannot GET /content/work/project-name/header/custom-header.jpg
Is content in page bundles only restricted to compilation from the markdown within the bundle itself?
zwbetz
December 5, 2018, 7:21pm
2
We would need to see your full project to help you. Please see requesting help .
But to start, is src/sass/
under assets/
or static/
?
src
is at the project root. I am using the atlas config.
content
is at the project root.
zwbetz
December 5, 2018, 7:40pm
4
Okay, so per the gulp file, your generated CSS will end up at static/css/
, which will become /css/
at the root when your site is generated. So update your background image URL accordingly.
'src/sass/**/*.scss'
])
.pipe($.plumber({ errorHandler: onError }))
.pipe($.print())
.pipe($.if(!isProduction, $.sassLint()))
.pipe($.if(!isProduction, $.sassLint.format()))
.pipe($.sass({ precision: 5, importer: tildeImporter }))
.pipe($.autoprefixer(['ie >= 10', 'last 2 versions']))
.pipe($.if(isProduction, $.cssnano({ discardUnused: false, minifyFontValues: false })))
.pipe($.size({ gzip: true, showFiles: true }))
.pipe(gulp.dest('static/css'))
.pipe(browserSync.stream())
})
gulp.task('js-watch', ['js'], (cb) => {
browserSync.reload();
cb();
});
gulp.task('js', () => {
return gulp.src([
Ah, that’s what I didn’t connect. Thanks. I has assumed that the pipeline would update the pathing.