CODEWITHSUNDEEP
twitter-bootstrapsassgruntjsyeoman
Matt Smith
Matt Smith

Reputation: 2158

Grunt watch can't compile .scss, unable to find sass-bootstrap/lib/bootstrap

I set up a quick app using Yeoman, Bower, and Grunt (npm install -g yo grunt-cli bower). I installed the AngularJS generator (npm install -g generator-angular) and ran yo angular to set up the project directory. Finally in install Bootstrap for Angular (bower install angular-bootstrap --save).

When I run grunt server --force I see that the .scss that is part of the projects style directory isn't being compiled to .css. Instead, this error is given:

Syntax error: File to import not found or unreadable: sass-bootstrap/lib/bootstrap.
          Load path: C:/Users/C8M9S/Desktop/myAngular/app/styles
    on line 3 of main.scss

1: $icon-font-path: "/bower_components/sass-bootstrap/fonts/";
2: 
3: @import 'sass-bootstrap/lib/bootstrap';

Any ideas why that's not compiling?

Upvotes: 2

Views: 4178

Answers (2)

omarjebari
omarjebari

Reputation: 5519

But the error says its on line 3 and the code on line 3 doesnt even use $icon-font-path! I have a similar problem and the solution was to modify the Gruntfile.js config to tell grunt where the components are using the 'loadPath' parameter:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        style: 'expanded',
          loadPath: 'bower_components/foundation/scss'
        },
        files: {
           'public/static/css/main.css': 'app/frontend/scss/foundation.scss'
        }
      }

Now if in foundations.scss you have the following line: @import "foundation/components/accordion"

it looks for the accordion component in: bower_components/foundation/scss/foundation/components/accordion

Hope this helps :)

Upvotes: 4

xiwcx
xiwcx

Reputation: 227

$icon-font-path: "/bower_components/sass-bootstrap/fonts/";

Is looking for the bower_components folder at the root of your entire filesystem. Remove the / at the beginning and figure out what the relative file path is to the bower components folder from where your sass files are. Something like this:

$icon-font-path: "../../bower_components/sass-bootstrap/fonts/";

Upvotes: 1

Related Questions