Matblazor: Changing CSS files (Detailed Guide)

[sam-marteau]

Hello guys,
i am a noob to web developing. I know that this issue has already been dealt with..[#509, #479, #311, #512]
The problem is: I just cant figure out how to build Matblazor Project after editing the scss files to get my CSS/JS file that i can use in my VS project. I downloaded all the npm Packages been stated in die JSON file, but i cant get it to work.
So here is my request: Can somebody write a more or less detailed guide:

• which packages and files do you need?
• how do you get them?
• how to implement in other projects?
  I really would be grateful if someone spends a little time for that :)
  In case i am posting this issue at the wrong place, please forgive. I am also new to GitHub
  Thanks
  Sam

[lindespang]

Hi!

It should be quite straightforward, but I can explain briefly below. I assume that what you want to do is to edit main.scss and see the resulting built css file:

1. Edit ...\MatBlazor\src\MatBlazor.Web\src\main.scss with something, like a new css class.
2. Open a command prompt of your choosing.
3. Move to ...\MatBlazor\src\MatBlazor.Web
4. run npm install
5. run npm run build
6. Resulting .css is found in ...\MatBlazor\src\MatBlazor\wwwroot\dist\matBlazor.css

I just tested this in a fresh master build so it should work.

[sam-marteau]

hi @lindespang ,
i succeeded after a lot of trying. Thank you for your answer as well.
I had trouble to find the the right folder for Matblazor.web, so that webpacket could resolve the URL to some fonts and icons. For all the beginners like me: In Asp net core webassembly you need to

• 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
• uninstall node-sass (dunno if still necessary)
• 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

[lindespang]

Glad to hear you solved it @sam-marteau , closing this issue as people who also have struggles can still find it in the search!

[aviabunin]

Everything worked out for me successfully(steps of @lindespang without any other, with the latest download of MatBlazor). Only 2 remarks:

• If downloaded MatBlazor to your computer, then rename MatBlazor-Master to MatBlazor;
• after "npm install" I did "npm audit fix" as suggested by the system, although this is unnecessary, because in file package.json this command is present

[enkodellc]

https://github.com/SamProf/MatBlazor/wiki/How-to-Edit-the-css---scss-styles-for-MatBlazor