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

I personally 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'

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