How do you use CSS?

[steinybot]

This might be a stupid question, as I am not a web developer by any stretch of the imagination, but how do I use CSS?

I have been following various guides on webpack but I get a bit lost when I try and map that over to Scala.js and scalajs-bundler.

I have a custom webpack configuration setup using the instructions in sass-loader and mini-css-extract-plugin.

This shows how little I know about webpack but I think I need to then "import" the CSS. Where and how do I do this?

The webpack-assets test does have something similar where there is a custom entrypoint but this only looks like it is configured for production (so how does it work in dev mode?). It seems better if I stick to the generated entry point since that seems to contain some required things. It also uses html-webpack-plugin which I don't want to use (I'm using twirl templates in a Play project).

I also saw that there is another sharedconfig test which seems to be importing it via @JSImport which is what I would have expected. I think I figured out that the !loader prefixes are to disable those loaders although I have no idea why.

There is also a comment on https://github.com/scalacenter/scalajs-bundler/issues/62 which says that it CSS loaders can be used but by accident rather than by design.

[glmars]

@js.native
@JSImport("styles.scss", JSImport.Namespace)
object Css extends js.Object

object App
{
  private val css = Css
  def main(args: Array[String])
  {
    //...
  }
}

Of course you need sass-loader/css-loader configured in webpack.config.js

[steinybot]

Thanks @glmars.