Where to Add Global CSS in an Angular 2 Application Made with Visual Studio 2017 Angular Template

.Net Core 2 SPA/Angular Template - Render Global CSS

As in visual studio 2019 Angular template with ASP.Net Core 2.2 you don't have to manage webpack file like old version. I'm assume that you are using Angular 5 with webpack template.

Create ASP.Net Core app like this

Then you will see style.css in your angular app. That is where you put your global style

Hope it will help you. Best regards.

How to add font awesome to ASP.NET Core Angular 2 application in Visual Studio 2017 with SpaTemplates

Credit original post

This is for .NET Core 2, after you create a SPA Project using dotnet new angular:

1. Go to the root of the project and install the package: npm install font-awesome --save. You should now see it in package.json dependencies.

2. After that go to webpack.config.vendor.js and add font awesome to the array under non tree shakable modules:

   const nonTreeShakableModules = [
   'bootstrap',
   'bootstrap/dist/css/bootstrap.css',
   'es6-promise',
   'es6-shim',
   'event-source-polyfill',
   'font-awesome/css/font-awesome.css',
   'jquery',
   ];

3. Now we need to tell the webpack that we added this new package. So if you haven't done so before install this in the root of project with npm install --save-dev npm-install-webpack-plugin.

4. Finally, run this command in the root of project: webpack --config webpack.config.vendor.js

angular-cli how to add global styles?

As of the beta.14 release of the CLI (which uses Angular 2.0 final), a global stylesheet can be linked inside angular-cli.json under the "styles" key. This is a reference to a file relative to the src/ directory, which is style.css by default.

Leveraging this method you could:

• Copy the global styles into src/styles.css
• Use CSS imports to import external rules into styles.css
• Add more global styles via the apps[0].styles property in angular-cli.json

See also Global Styles in angular-cli's wiki.

How to implement angular-mdc-web in .NET Core Angular VS2017 Template

Couple options to resolve ripple opacity issue. Downgrade node-sass to 4.7.2, or upgrade angular-mdc/web to latest v0.34.1.

Issue was related to variables in the ripple mixins not getting interpolated properly.

Hope this helps.

---

Related Topics