yeoman, SCSS, bower server, styles/main.css not found

3
votes

I wanted today to try scss support of yeoman. I followed the procedure :

  • $ yo angular
  • include Twitter Bootstrap? Yes
  • use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
  • $ grunt server

And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.

So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console

2
sassyeomanbower

2 Answers

0
votes

You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:

    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.

0
votes

I had the same issue, your main.scss file has issues with bootstrap css

I deleted the line ( 2. line )

@import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

and have no more issues. it compiles to main.css