0

I've been using slick lightbox to create a popup effect on my site. Everything was working fine during development (or so I thought). Upon uploading the site to the development server (using FTP), slick lightbox is trying to look into the bower_components folder to find the 'slick-lightbox.css' file rather than in the compiled css file.

Here is my bower.json, gulpfile.js and main.scss where everything is set.

bower.json

 {
  "name": "rb-corporate-buzz",
  "private": true,
  "dependencies": {
    ...
    "slick-lightbox": "^0.2.1"
  },
}

gulpfile.js

gulp.task('scripts', function(){
    return gulp.src([
        ...
        'bower_components/slick-carousel/slick/slick.js',
        'bower_components/slick-lightbox/dist/slick-lightbox.js',
        ...
        'assets/js/custom/main.js'
    ])
    .pipe(concat('main.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('assets/js/'))
    .pipe(notify({
        message: 'Scripts minified'
    }));
});

gulp.task('styles', function(){
    return gulp.src('assets/scss/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cssnano({ zindex: false }))
        .pipe(rename({ suffix: '.min'}))
        .pipe(gulp.dest('assets/css/'))
        .pipe(notify({
            message: 'Styles Minified'
        }));
});

main.scss <-- This file imports all my scss files.

@import "../../bower_components/slick-carousel/slick/slick.scss";
@import "../../bower_components/slick-lightbox/dist/slick-lightbox.css";

When on the development server, without bower installed, it is getting a 404 for:

http://192.168.55.11/bower_components/slick-lightbox/dist/slick-lightbox.css 404 (Not Found)

danielnixon
  • 4,178
  • 1
  • 27
  • 39
Ryan Hipkiss
  • 648
  • 1
  • 7
  • 20
  • Importing `css` is not the same as importing `sass`. Try http://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file – sobolevn Sep 20 '16 at 08:23
  • Thank you. That worked perfectly. All I had to do was remove the `".css"` extension @sobolevn – Ryan Hipkiss Sep 20 '16 at 08:34

0 Answers0