Vue-material: How to compile from SCSS?

[ArnyS]

Guys, great job with framework, but it's the same bullshit from release to release with SCSS workflow...

How can we import SCSS sources to edit or fix some bugs in?
Please show clean proper way with vue webpack! What files to import?
Trying different ways but got errors like

Module build failed: 
@import "~components/MdAnimation/variables";
^
      File to import not found or unreadable: ~components/MdAnimation/variables.
Parent style sheet: stdin

Also it'll be very usefull to know the same thing with Gulp

[Samuell1]

You can import scss like @import '~vue-material/dist/path/to/scss/file'

[marcosmoura]

You can't import sources to edit or fix some bugs in your codebase.
If you want to fix things and edit Vue Material source files, please create a fork and run it locally by yourself.

_{^{P.S. Be kind with your words. Nothing here is a bullshit. This is a OOS library.}}

[ArnyS]

@Samuell1 It's clear.. but what files should I import to compile lib properly without errors?
@marcosmoura ;) I'm not interested in editing other users' repositories on github... of course locally

[Samuell1]

If you want use themes you can use prebuilded themes (https://vuematerial.io/themes/prebuilt) or you can define themes by yourself with SCSS https://vuematerial.io/themes/configuration

[ArnyS]

@Samuell1 I want to compile from sources directly, instead of import compiled vue-material.min.css

[marcosmoura]

@ArnyS Why do you need to "compile" sources? The build version is the way to go.

[ArnyS]

@marcosmoura There are many ways to go, I think... but the question wasn't about WHY, but HOW

[marcosmoura]

The question about why is for me to understand what you want to do, for help purposes!
There is no way to import the source files. Vue Material sources relies on Webpack's aliases. This is because the sources are only for development. That's why you couldn't import the src file. I don't plan to add support for it anytime soon, because this will change the entire architecture of Vue Material source code, and honestly, I don't want to do that.
Please follow the documentation closely and notice that Vue Material is a beta version that is walking towards to be 'stable' soon.

[ArnyS]

@marcosmoura ok. thanx for your answer.
I guess, there is no any way to extract components css to single file? It's very bad practice for my project to inline tonns of css.
Another question - component internal scss editing if I need.. where and how?

[marcosmoura]

No. There is: https://github.com/vuejs/vue-loader/blob/master/docs/en/configurations/extract-css.md
About editing internal SCSS. You can't right now. Just override the css on your own codebase.

[ArnyS]

@marcosmoura

1. Vue-loader with axtract, actually resolve nothing while I can't compile from source...
2. Inline styles appears always after any imported css files in HEAD in html, so I can't override..

[Samuell1]

@ArnyS in vue-cli templates its possible to overwrite, i think you using some weird boilerplate

[akaSybe]

I agree with @ArnyS. It will be great to have ability to override SASS variables.

[zevdg]

Another good reason to compile SCSS from source would be to reduce bundle size as described in https://github.com/vuematerial/vue-material/issues/1413#issuecomment-358842505. For people trying to keep their bundle sizes small, having a well documented, officially supported, advanced "compile SCSS from source" workflow would be immensely helpful.