Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

I am utilizing ASP.NET MVC as the server and Angular as the client application.

Instead of a static index.html file, I have index.cshtml. The styles I am using are global styles rather than component-scoped.

My query revolves around working with a bunch of scss styles files in Angular/webpack and MVC.

Do I need to manually import "global style files" in the app.component file? Is the same process required for vendor CSS files like Bootstrap?

What is considered best practice here? My initial thought is something along these lines:

import { Component } from '@angular/core';

import '../styles/myglobalStyles.css'
import '../styles/boostrap.min.css'
import '../styles/otherVendors.min.css' 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent { }

Another question arises regarding ANGULAR CLI setup, where one adds the following in the angular-cli.json file. What purpose does it serve? Does this action append the styles.css file to the app.component.html during build? (Can you direct me to any relevant sources/documentation?)

],
"styles": [
   "src/styles.css"
],

Answer №1

One approach is to utilize webpack for combining all SCSS files, converting them to CSS, and then exporting them to a file named lib.css. This file can then be included in Layout.cshtml as it contains the global styles for your application. Consider using a third-party library to minify your CSS code for enhanced performance optimization.

Best regards

Answer №2

By incorporating styles referenced in the component's metadata, template, or imported into the component itself, CSS encapsulation is achieved. This ensures that styles are scoped to the individual component, preventing any clashes with other components.

@Component({
  selector: 'comp',
  templateUrl: './comp.component.html',
  styleUrls: ['./comp.component.css']
})

For global style rules that need to apply to all elements, additional style files can be included in the angular.json file and bundled by webpack (integrated in the CLI). These stylesheets will then be linked to the index.html.

To add them, include them in the styles array within angular.json:

"styles": [
  "styles.css",
  "../styles/bootstrap.min.css"
],

Refer to the Angular CLI documentation on workspace configuration for more information: https://angular.io/cli#workspace-and-project-configuration

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular Material Calendar is always designed to highlight the current date and keep focus on today's day

When I click on a date in the Angular Material Calendar, the tile for today's date is always highlighted. This occurs even if the selected date is in a different month. Do you think this behavior is a bug or a feature? I personally believe it is a fe ...

Encountering issue with POST operation in GraphQL on Angular application integrated with AWS Amplify and DynamoDB

I am in the process of developing a basic Angular application using AWS Amplify with a DynamoDB backend. To handle GraphQL API calls, I utilized the amplify add API command to generate the necessary code. My current objective is to populate a table with ...

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

"Utilize the handle property of a component when interacting with the window.onclick

In my component, I have a property called enableButtons which is set to true when I click on an ion-menu label. However, I want this property to revert to false if I click anywhere else. Here's the code I tried: export class ProfilePage implements OnI ...

Within Angular, the Subscribe function is invoked after all other methods in the component have been executed. Consequently, this sequence of events often prevents me from effectively utilizing the response data

Struggling with implementing await and async in TypeScript, especially as a beginner. Below is how I attempted to use them: async refreshList(){ await this.service.refreshList().subscribe(res => { console.log(res); this.service.todoListModel=res; ...

What is the best way to implement asynchronous guarding for users?

Seeking assistance with implementing async route guard. I have a service that handles user authentication: @Injectable() export class GlobalVarsService { private isAgreeOk = new BehaviorSubject(false); constructor() { }; getAgreeState(): Obser ...

Clicking on the sub kendo panelbar item activates the parent kendo panelbar item

Utilizing a Kendo Angular UI panelbar within the sidepanel as a treemenu with submenu's, each item is linked to the Angular router routes array via routerLink. An issue arises when opening the submenu, where the parent menuitem's path is followe ...

What is the best way to eliminate the space between two columns of a row in Bootstrap 5 grid system?

In my quest to achieve the grid layout illustrated in the image below https://i.sstatic.net/4hsjw.jpg .col_1{ background-color: bisque !important; height: 500px; } .col_2 { width: 300px; height: 287px; background-position: cent ...

When resizing the browser or changing resolution, one div may cover another div

After generating the HTML on my ASP.NET page, everything looks good initially. However, I noticed that when I adjust the screen resolution or reduce the browser size, the image in the logoplace div starts to overlap. It appears to be an issue with absolute ...

Does Vetur have additional undefined types in the type inference of deconstructed props?

When reviewing the code below, Vetur concluded that x,y are of type number | undefined. The presence of undefined is leading to numerous warnings when using x,y further in the code. Is there a way to eliminate the undefined from the type inference? <s ...

Ensuring one div remains in a fixed position relative to another div

I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized. #halvfjerds { width: 100%; height: 1050px; background-color ...

Refreshing a component without having to reload the entire page in Angular4: A step-by-step guide

I have an application built with Angular 4 that consists of two components - one for adding items and another for viewing them. I am facing an issue where the view page does not update with the new item added. Although I can see the updated data source, th ...

Is it possible for 'will-change' to achieve the intended outcome when implemented using the Web Animations API?

Google recommends: Google suggests that if an animation may occur within the next 200ms [...] it's a good idea to use will-change on elements being animated. In most cases, any element in your app's current view that you plan to animate should ...

What is the lowest opacity value allowed in CSS?

When adjusting the opacity value of a button in CSS, I have noticed that even when the opacity is reduced to 0.005, the button remains clickable to some extent. However, when reducing the value to 0.000000000000000000000000000000000001, the button becomes ...

Is it possible to duplicate a response before making changes to its contents?

Imagine we are developing a response interceptor for an Angular 4 application using the HttpClient: export class MyInterceptor implements HttpInterceptor { public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<an ...

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

What is preventing this button from having a border-radius?

The red border is just for visual reference. I attempted using overflow: hidden but it didn't yield the desired outcome. My goal is to achieve the same border radius as the red border. Is there something amiss in my approach? Appreciate your assistanc ...

Error in Typescript: Function not being triggered on button click

As someone who is just starting out with typescript, I've been tackling a simple code that should display an alert message in the browser when a button is clicked. I've experimented with the button and input tags, as well as using both onclick ev ...

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

the combination of class and type functions as a jquery selector

<button class="actionButton default" type="submit"> Save</button> Can you select this button by both its class and type using a jQuery selector? I attempted the following, but it did not work: var saveBttn = $('.actionButton.default [ty ...