meteor-scss

meteor-scss copied to clipboard

not entirely sure if its a cache problem, but, importing Core-ui I found several instances of "undefined variable"...

turn out to be that in the bootstrap/bootstrap.scss there is a

@import 'variables';

and after that, in core/core.scss also there is a line with

@import 'variables';

the second one is not evaluated (maybe because is cached from before).

I ended up copying the files to my project and changed this line to

@import './variables'; to search this resource in the same directory and everything works fine (well, repiting the same proccess in the rest of the files).

now, they use babel/webpack to transpile their module...

I think it would be nice to first search for @import 'some_resource' in the same directory and then try to get it from the global path, just for compatibility reasons to others compilers in order to be capable to import scss from third party modules

The variable $card-border-radius-inner is not defined after all. With your tip and declaring of the variable it works for me.

Hello,

Having the same issues as mentioned before. The $card-border-radius-inner seems not to be defined, so i switched it to $card-border-inner-radius which fixes that issue.

However, next I get an error that $gray-200 is not defined. If I hardcode the color in, i will get undefined for gray-300 and so on.

Trying to run this on fourseven:scss

And changing

@import 'variables';

To

@import './variables';

Doesn't work for you @snowbane ?

I have tried that, sadly it does not work.

@josensanchez , where did you place your coreUI scss folder? Is it in meteor's client?

Any chance you could give me a breakdown of your folder structure?

nop... if you put everything in the client folder, it would be evaluate following the meteor file load order and the imports would be a mess.

I place coreUI inside of the imports directory and in one main.scss on the client directory add the next lines

$card-border-radius-inner: 0px;

@import  '{}/imports/CoreUI-React/React_Starter/scss/style.scss';

well, something like that... we organize files differently, but if it's not clear, I'm talking about this file

https://github.com/mrholek/CoreUI-React/blob/master/React_Starter/scss/style.scss

To resolve the issue:

1. moved scss folder to imports/ui/scss
2. removed syle.scss file
3. created main.scss file in client folder with main.js & main.html with the following:

// start of main.scss @import "../imports/ui/scss/bootstrap-variables"; @import "../node_modules/bootstrap/scss/bootstrap"; @import "../imports/ui/scss/core-variables";

@import "../imports/ui/scss/core/variables"; @import "../imports/ui/scss/core/mixins"; @import "../imports/ui/scss/core/core";

@import "../imports/ui/scss/core/typography"; @import "../imports/ui/scss/core/animate"; @import "../imports/ui/scss/core/aside"; @import "../imports/ui/scss/core/avatars"; @import "../imports/ui/scss/core/badge"; @import "../imports/ui/scss/core/breadcrumb-menu"; @import "../imports/ui/scss/core/breadcrumb"; @import "../imports/ui/scss/core/buttons"; @import "../imports/ui/scss/core/callout"; @import "../imports/ui/scss/core/card"; @import "../imports/ui/scss/core/charts"; @import "../imports/ui/scss/core/dropdown"; @import "../imports/ui/scss/core/dropdown-menu-right"; @import "../imports/ui/scss/core/footer"; @import "../imports/ui/scss/core/grid"; @import "../imports/ui/scss/core/input-group"; @import "../imports/ui/scss/core/loading"; @import "../imports/ui/scss/core/mobile"; @import "../imports/ui/scss/core/modal"; @import "../imports/ui/scss/core/nav"; @import "../imports/ui/scss/core/navbar"; @import "../imports/ui/scss/core/progress"; @import "../imports/ui/scss/core/sidebar"; @import "../imports/ui/scss/core/switches"; @import "../imports/ui/scss/core/tables"; @import "../imports/ui/scss/core/widgets";

@import "../imports/ui/scss/core/layout"; @import "../imports/ui/scss/core/others"; @import "../imports/ui/scss/core/utilities"; @import "../imports/ui/scss/core/temp"; @import "../imports/ui/scss/core/rtl";

@import "../imports/ui/scss/custom"; // end of main.scss

anyone have a better way of doing this?

This issue happens because the core.scss does not start with '', so it is loaded before the others which start with '', so you get XXX is undefined error

This is really annoying. I am trying to combine font-awesome-pro with bootstrap, but because both define the same include names, things get messed up with a lot of undefined variables, although the imports come from different folders.

Is there any workaround for this? It makes combining complex sass libraries nearly impossible.