javascript - Precompile Material Design For Web

Question

I am going to be using Material Design For Web in a PHP application with a custom theme. I am looking for instructions on how to precompile the JS and CSS with my custom theme variables so that I can just pull in the js and css like you would if using the CDN. It appears the CDN does offer some custom themed color options, but none look like what I am looking for which is why I am looking to create my own precompiled css and js files

What are the steps to precompile with the custom theme variables so that I can just have a dist css and js file?

Answer 1

Although this question is kind of too generic, I do understand why it appeared. material-components-web is not very easy to start with. Docs and examples are scarce and sometimes it is hard to understand how to do even basic things.

To be able to compile it with your own custom theme variables you need:

1. Setup SASS compilation in your project if you don't have it yet.
2. Add npm package "material-components-web" as a dependency.
3. In your root SCSS-file configure MDC theme with your colors like this:

@use '@material/theme' with (
  $primary: #212121,
  $on-primary: #ffffff,
  $secondary: #ffc629,
  $background: #33333D,
  $surface: #ffffff,
  $on-surface: #000000
);

4. After that you can include rest of the MDC's SCSS like this:

@use 'material-components-web/material-components-web'

5. Since you need to customize only CSS, I suggest you reference existing precompiled JS. Otherwise you'll need to configure babel compilation as well.

You can use basic-material-starter-kit as an example.