Sidr missing file

Question

I installed sidr with bower, but when I try to run gulp, it breaks and outputs the following error

bower_components/sidr/src/scss/sidr/_base.scss
Error: File to import not found or unreadable: compass/css3
        on line 1 of bower_components/sidr/src/scss/sidr/_base.scss
>> @import 'compass/css3';
   ^

I looked, and this compass/css3 file does not exists. _base.scss is the only file in that directory. Is there a fix for this that won't get over written whenever bower updates?

Answer 1

Not sure what you're using it with, but I'm trying to get it working with WordPress/Sage and found this link.

Basically:

1. Run npm install compass-mixins --save-dev in your theme directory. (See Edit 1 Below)
2. Edit the cssTasks - includePaths section of your gulpfile.js to point to the location of the compass folder eg: './node_modules/compass-mixins/lib'

Hope that helps!

---

Caveat

While that fixed the error for not finding the compass/css3 folder, I am now getting these warnings:

WARNING: PIE does not support background-image. Use @include background(linear-gradient(#4d4d4d, #1a1a1a)) instead.
    on line 74 of node_modules/compass-mixins/lib/compass/css3/_images.scss
    from line 46 of bower_components/sidr/src/scss/sidr/_base.scss

WARNING: PIE does not support background-image. Use @include background(linear-gradient(white, #dfdfdf)) instead.
    on line 74 of node_modules/compass-mixins/lib/compass/css3/_images.scss
    from line 46 of bower_components/sidr/src/scss/sidr/_base.scss 

---

It also seems to be causing issues with uglify-js because I could run gulp fine before bower installing sidr.

Will update as I progress.

EDIT 1

After reading this, I uninstalled the npm compass-mixins package and installed via bower and changed the path in the gulpfile.js accordingly.

The Warnings for PIE are gone. Still experiencing issues with uglify-js though.

---

EDIT 2

Ran npm install gulp-util and set up the gulpfile to output more info on the error.

{ [Error: scripts/main.js: Unexpected token: name (sidr)]
      message: 'scripts/main.js: Unexpected token: name (sidr)',
      fileName: 'scripts/main.js',
      ...
      showStack: false,
      showProperties: true,
      plugin: 'gulp-uglify' }

---