extract scss to global style

[ardevik]

extract scss to css global style webpack config example something like extract material 2 theme _all-theme.scss to vendor.css

[asadsahi]

@Ardevik I can't see any benefit of extracting css in seperate file. component styles need to work with components. Global styles need to be loaded upfront by downloading as a sperate request. Even styles are part of main bundle, we are still having same size but reducing one http request, which might not be ideal in some situations (perhaps http2).

Can you explain what benefit you are looking with seperate css bundle?

[ardevik]

i dont know benefit from seperate css bundle, but your template use extract text webpack plugin, that extract vendor.css to vendor.css global style, which extract bootstrap.css. Because i use material design 2, i just want use prebuilt pellete(color/theme) from material design 2, but the prebuilt is _all-theme.scss, not css. i just want to know(example) how to use that prebuilt for all my component from this template

[asadsahi]

@Ardevik this porject isn't targetting a particular ui library. However you can try adding material css/scss in following location:

https://github.com/asadsahi/AspNetCoreSpa/tree/master/Client/styles

and reference them in:

https://github.com/asadsahi/AspNetCoreSpa/blob/master/Client/main.ts

currently a css vendor files is referenced in main.ts, but you can reference any css/scss files either from relative paths or from node_modules. An example from node_modules is used in this project by referencing bootstrap and font-awesome in vendor.css files.