Issue with Sage SASS version

sage
1

Everything ran smoothly through installation. Completed the instructions for using Sass.
After running gulp no compiling errors appeared but the main.css is returning:

/*# sourceMappingURL=main.css.map */

Any suggestions are appreciated.

2

That’s pointing to the source maps, so when you use something like Chrome Inspector to look at CSS, it doesn’t point to the minified CSS file, it points your styles to the actual LESS/SASS file the style was originally in.

Is this causing an error or something?

3

Well, its just that there’s no styling… at all.

4

You followed the instructions in https://github.com/roots/sage/blob/master/assets/styles/main.scss.example ?

5

Yeap! Step by step. Already tried it in 2 different installations.

Versions I’m running with:

XXXXX-MacBook:~ XXXXX$ node --version
v0.12.0
XXXXX-MacBook:~ XXXXX$ nvm --version
0.23.3
XXXXX-MacBook:~ XXXXX$ npm --version
2.6.0
XXXXX-MacBook:~ XXXXX$ gulp --version
[20:46:27] CLI version 3.8.11
[20:46:27] Local version 3.8.11
XXXXX-MacBook:~ XXXXX$ bower --version
1.3.12
6

I just did the same thing.

Checking the main.scss file, for some reason the @import was removed. Adding it back in and pointing it to Bootstrap includes all the styles.

7

checking this out right now

8

So, every time after running gulp the line:

@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";

… disappears from within main.scss. In my case, even after putting it back no styling is being added.

9

Hmm I am not seeing this in isolation.

  1. What platform are you on?
  2. What version of node are you on?
  3. What does npm list --depth=0 spit out?
  4. Have you made any changes to bower.json?

edit: haha sorry saw that you posted this above

10

1 - Mac OS X 10.10.2
2 - XXX-MacBook:~ XXX$ node --version v0.12.0
3 -

XXX-MacBook:promptDev XXX$ npm list --depth=0
sage@8.0.0 /Applications/MAMP/htdocs/roots/wp-content/themes/promptDev
├── asset-builder@0.4.1
├── browser-sync@2.2.1
├── del@1.1.1
├── gulp@3.8.11
├── gulp-changed@1.1.1
├── gulp-concat@2.5.2
├── gulp-flatten@0.0.4
├── gulp-if@1.2.5
├── gulp-imagemin@2.2.1
├── gulp-jshint@1.9.2
├── gulp-less@3.0.1
├── gulp-load-plugins@0.8.0
├── gulp-pleeease@1.2.0
├── gulp-plumber@0.6.6
├── gulp-rename@1.2.0
├── gulp-rev@3.0.1
├── gulp-sass@1.3.3
├── gulp-sourcemaps@1.3.0
├── gulp-uglify@1.1.0
├── imagemin-pngcrush@4.0.0
├── jshint-stylish@1.0.1
├── lazypipe@0.2.2
├── merge-stream@0.1.7
├── traverse@0.6.6
├── wiredep@2.2.2
└── yargs@3.3.1

4 - No changes to bower.json

PD. Is all cool! :stuck_out_tongue:

11
12

Change

// bower:sass

to

// bower:scss
1 Like
13

Thanks for figuring that out, boss :blush:

14

You guys rock! Amazing team.

… silly mistake. It can happen to everyone.

Cheers!!

15

Been testing the 8.0.0 branch with actual production Sass files for months! Barely tested the example file :stuck_out_tongue_winking_eye:

16

Where do you change that in main.scss ?

Is difficult to use Sage with Sass !
EDIT:
I did that and it works now but I need to comment the LESS files, It’s ok but is more work :frowning:
I would like to have those files!

mv layout/*.less layout/*.sass

For all files…

// Automatically injected Bower 
// bower:scss
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

//@import "common/_variables";
//@import "common/_global";
//@import "components/_buttons";
//@import "components/_comments"
//@import "components/_forms";
//@import "components/_grid";
//@import "components/_wp-classe
//@import "layouts/_header";
//@import "layouts/_sidebar";
//@import "layouts/_footer";
//@import "layouts/_pages";
//@import "layouts/_posts";

Thanks

17

That’s just how it is right now.

2 Likes
18

This topic was automatically closed after 60 minutes. New replies are no longer allowed.