Color changes

[ordokr]

Thank you Xingchen for your help via e-mail, I am posting here as you asked.

I basically copied all of contents of the files in https://github.com/Zodiase/meteor-mdl/tree/master/integration-tests/sass

and on my project I got the custom colors, and could do my own custom colors, but the buttons and other mdl effects were not there. When I removed the { "theme": false } on the zodiase mdl json file I got the buttons back, but the default color scheme.

See the pics:

Here is the my mdl.scss file in the root of the project

`// Load color definitions to use. @import '{zodiase:mdl-assets}/src/color-definitions';

$trim-color-classes: true;

$color-primary: "62,80,98"; $color-primary-dark: "43,56,67"; $color-accent: "115,171,184";

$color-primary-contrast: $color-dark-contrast; $color-accent-contrast: $color-light-contrast;

// Load mdl.

@import '{zodiase:mdl}/theme';`

How do I get my custom coloring and the mdl components to work? I tried reading over the directions again and again, but couldn't find where I missed a line or piece of instruction.

Should I have the main.html in the root or in the client folder? When I had both it basically gave me duplicates on the same page.

So basically, theme = false makes the colors I want appear, but then all the components are gone, it is just the plain buttons etc.

Thank you! Tim

[Zodiase]

Do you have the SCSS Meteor package installed (to handle .scss files)?

[ordokr]

I didn't install anything like that yet no, could you recommend which package and /or command to enter to download it?

[Zodiase]

I think this one here is what people would typically use in Meteor. https://atmospherejs.com/fourseven/scss

Simply run meteor add fourseven:scss in your app directory to install it to the app. After which it would be building .scss files into the final JavaScript bundle so that your code in mdl.scss, for example, would finally take effect.

As to placement of any .html or other files, please refer to Meteor guide, especially this section here: https://guide.meteor.com/structure.html#javascript-structure.

[ordokr]

Okay, that brings me one step further to a solution, but when I launch the app via meteor cmd, I get the error:

While processing files with fourseven:scss (for target web.browser):
  /mdl.scss: Scss compiler error: File to import: {zodiase:mdl}/theme not found in file:
  C:/Users/Vail/halsuga/{}/mdl.scss

[ordokr]

So basically I have a basic app with

mdl.scss file // Load color definitions to use. $trim-color-classes: true;

$color-primary: "62,80,98"; $color-primary-dark: "43,56,67"; $color-accent: "115,171,184";

// Load mdl. @import '{zodiase:mdl}/theme';

a zodiase-mdl.json file with { "theme": false }

and that's the only thing I changed, should I also change the scss files in the .meteor\packages\zodiase_mdl-assets\1.3.0\web.browser\src folder?

[Zodiase]

You shouldn't need to change any files not in your project.

Could you provide the output of running meteor list in your project?

[ordokr]

Sure thing,

autopublish                          1.0.7  (For prototyping only) Publish the entire database to all clients
blaze-html-templates                 1.1.2  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                           0.8.2  Compiler plugin that supports ES2015+ in all .js files
es5-shim                             4.6.15  Shims and polyfills to improve ECMAScript 5 support
fezvrasta:bootstrap-material-design  0.5.9  FezVrasta's Bootstrap theme implementing Google's Material (Paper) D...
fourseven:scss                       4.5.4  Style with attitude. Sass and SCSS support for Meteor.js.
insecure                             1.0.7  (For prototyping only) Allow all database writes from the client
meteor-base                          1.1.0  Packages that every Meteor app needs
mobile-experience                    1.0.4  Packages for a great mobile user experience
mongo                                1.1.19  Adaptor for using MongoDB and Minimongo over DDP
reactive-var                         1.0.11  Reactive variable
shell-server                         0.2.4  Server-side component of the `meteor shell` command.
standard-minifier-css                1.3.4  Standard css minifier used with Meteor apps by default.
standard-minifier-js                 2.1.1  Standard javascript minifiers used with Meteor apps by default.
tracker                              1.1.3  Dependency tracker to allow reactive callbacks
zodiase:mdl                          1.0.6_2* A wrapper package for Google's Material Design Lite.

[ordokr]

I tried meteor update, but it gave me this message

The following top-level dependencies were not updated to the very latest version available:
 * zodiase:mdl 1.0.6_2 (1.3.0 is available)

[Zodiase]

Like I said in the email, you need the latest version of zodiase:mdl. But due to dependency constrains, you won't be able to use the latest version of fourseven:scss unfortunately.

Simply run these commands in your project, one at a time (ignore the comments):

# Remove `fourseven:scss` for now.
meteor remove fourseven:scss
# For simplicity let's remove `zodiase:mdl` for now as well.
meteor remove zodiase:mdl
# Now add back the latest version of `zodiase:mdl`.
meteor add zodiase:mdl@1.3.0
# Finally add back `fourseven:scss`.
meteor add fourseven:scss

This would ensure you install the proper version of fourseven:scss that satisfies the dependencies of zodiase:mdl.

Let me know if you encounter any errors while running these commands. I only expect meteor add zodiase:mdl@1.3.0 to fail for some other dependency conflicts.

[ordokr]

Thank you for helping me to solve this, I did that and it updated everything. However, I got

=> Started proxy.
* zodiase:mdl > Settings file ignored: {zodiase:mdl}/zodiase-mdl.json

after trying to launch, typing in just meteor

And my app still has the default blue and pink colors. I'm thinking it has something to do with the json file.

Again I want to say I appreciate the help, and if I can do anything to help you, I'd be happy to do it.

[Zodiase]

See #63 to learn more about the potentially annoying log you are seeing.

As of why it's still not working for you, I couldn't tell unless I have the reproduction. I would suggest start modifying based on the SASS example app since it's definitely working. You could also verify each piece is working properly, step by step.

For example, make sure mdl.scss is in effect by, say, adding a bizarre properly like `html {background: black} and if that works, you should be confident that at least that SASS file is properly loaded. What to check next could be whether there are any other stylesheets overwriting the output of the SASS files. You can check it in Chrome Inspector, for example.

[ordokr]

It was actually something dumb I did, I had removed zodiase and tried to apply mdl styling via an external mdl.js, and forget to remove the stylesheets in the header of my main html. Sorry for all the trouble! Now it works as desired! Many thanks to you Xingchen, it's a great piece of code you put together!

[Zodiase]

Good to know it's finally working for you! I'm closing this one as the issue has been resolved.