Sage 8.5.1

sage
1

Hi!
I’ve encountered a strange issue while using sage and gulp/sass. I am using pretty much default configuration, and yet - there seems to be a problem with variables.

My main.scss file:

    @import "common/variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap/scss/bootstrap.scss";
@import "../../bower_components/font-awesome/scss/font-awesome.scss";
// endbower

@import url(https://fonts.googleapis.com/css?family=Roboto);


@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

And common/variables.scss

// Grid settings
$main-sm-columns:       12;
$sidebar-sm-columns:    4;

// Header Settings
$header-height:         120px;

// Colors
$brand-primary:         #27ae60;
$background-primary:    #EDEDED;

$background-dark:       #363636;
$color-dark:            #fff;

$link-color:            #005abb;

$lg-primary:            #2099D1;

For example, in components/buttons.scss I can use all variables but $lg-primary. I tried to put it in different places in this file, no luck so far.

[09:42:37] Starting 'styles'...
assets/styles/components/_buttons.scss
Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

Error in plugin 'gulp-sass'
Message:
    assets/styles/components/_buttons.scss
Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

Details:
    status: 1
    file: /var/www/bm/public_html/wp-content/themes/BM/assets/styles/components/_buttons.scss
    line: 9
    column: 12
    formatted: Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

    messageFormatted: assets/styles/components/_buttons.scss
Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

    messageOriginal: Undefined variable: "$lg-primary".
    relativePath: assets/styles/components/_buttons.scss
Error in plugin 'gulp-sass'
Message:
    assets/styles/components/_buttons.scss
Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

Details:
    status: 1
    file: /var/www/bm/public_html/wp-content/themes/BM/assets/styles/components/_buttons.scss
    line: 9
    column: 12
    formatted: Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

    messageFormatted: assets/styles/components/_buttons.scss
Error: Undefined variable: "$lg-primary".
        on line 9 of assets/styles/components/_buttons.scss
>>     color: $lg-primary;
   -----------^

    messageOriginal: Undefined variable: "$lg-primary".
    relativePath: assets/styles/components/_buttons.scss

Any new variable seems to be undefinded, why is that?
Thanks!

2

It’s unlikely related to Sage itself because I use this SASS feature all the time without any issues—I’ve just done it now. You may need to troubleshoot your specific theme/SASS setup a bit more.

3

Nevermind, it was caused by my server.
Thank you though.