CODEWITHSUNDEEP
csstwitter-bootstrapsass
sdvnksv
sdvnksv

Reputation: 9678

Error when compiling Bootstrap SASS files

I've set up gulp to handle my Bootstrap template compilation:

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('app/assets/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

My SASS main theme.scss file looks like:

@import "helpers/variables"; // custom variables    
@import "../bootstrap/sass/bootstrap"; // original Bootstrap files
@import "pages/index"; // custom styles

The problem is when I overwrite original Bootstrap variables in helpers/variables, e.g.:

// Variables

$navbar-height: 100px;

I get the following error:

Error: File to import not found or unreadable: helpers/variables.

However, saving the main main.scss without any changes after I get the error message fixes the issue so the compilation goes as it should. Any ideas?

PS: My scss file tree is as below:

/assets/bootstrap/sass/_bootstrap.scss
/assets/sass/helpers/_variables.scss
/assets/sass/pages/_index.scss
/assets/sass/theme.scss

Upvotes: 0

Views: 694

Answers (1)

fontophilic
fontophilic

Reputation: 1085

bootstrap.scss is looking for the file helpers/_variables.scss relative to its own path. Edit bootstrap.scss to have your own _variables.scss file path.

As a note, (there is no right or wrong way to do this) I find it helpful to set up sass themes using frameworks in this manner:

src/
├── scss/
│   ├── my-theme/
│   │   ├── my-theme.scss
│   │   ├── _components.scss (and so on)
│   │   └── _new-variables.scss (a modified copy of bootstrap's)
│   └── vendor/
│       └── bootstrap/ (unaltered, for easier upgrading)
|           ├── bootstrap.scss
|           ├── _alerts.scss (and so on)
|           └── variables.scss
└─── main.scss

And main.scss looks like this: 

// Core variables and mixins
@import "my-theme/new-variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";

... the rest of boostrap stuff here ...

// Custom Theme 
@import "my-theme/my-theme";

Upvotes: 0

Related Questions