Skip to content

How to Edit the css scss styles for MatBlazor

Jump to bottom
Keith edited this page May 21, 2020 · 3 revisions

Edit the CSS or JS for MatBlazor

Most of the styling for MatBlazor comes directly from Material Design. You will need to open the MatBlazor.Web project with npm

MDC References

Building matblazor.css & matblazor.js

I personally (enkodellc) use WebStorm and just open the MatBlazor.Web directory but you should be able to install npm and run the following commands from your terminal

  • Change your directory to ../src/MatBlazor.Web/ - Terminal Command -> cd src/MatBlazor.Web
  • Install npm packages - Terminal Command -> npm install or yarn install
  • Make your changes to the .scss through the individual components in their directories src/MatBlazor.Web/src/mat***
  • Build the js / css - Terminal Command -> npm run build
  • Your new css and js should now be here ...\MatBlazor\src\MatBlazor\wwwroot\dist\matBlazor.css

Commit Notes

  • Please do not commit the compiled .js or .css files in your PR. Only commit the .scss or .js individual component files. Also do not commit MatBlazor.xml either. These will be generated on release.

Here is @sam-marteau take on it

  • Copy Matblazor.web into Project/Client/, the Matblazor folder from nuget installation is there as well
  • Link fonts and icons (e.g. in wwwroot/css) in theme.sscs (find in: Client\MatBlazor.Web\src\theme) to src: url(/css/...
  • Download npm and packages (webpack, webpack CLI) in the local folder Matblazor.Web
  • use npm run-script build
  • find files in your ...\MatBlazor\src\MatBlazor\wwwroot\dist\matBlazor.css
  • Copy to files to css/whatever/ and import them in index.html
Clone this wiki locally