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

Add JavaScript code to your project without bundling it as a module

Is it possible to incorporate a JavaScript library into webpack that is not structured as a UMD-compatible module (AMD, CommonJS)? I want the library to be included in a <script> tag only when necessary and managed by webpack without passing through ...

Error message stating NullInjectorError with NgxSpinnerService; encountered No provider for t while attempting to host on Firebase

As I attempt to deploy my app on Firebase, everything functions properly in localhost. However, upon successful hosting on Firebase at the Firebase domain, an issue arises: NullInjectorError: StaticInjectorError(wo)[class{constructor(t,e) at SpinnerServic ...

What steps can be taken to resolve the "value" parameter exceeding the range error in Protractor?

Currently, I am utilizing Angular 7 in combination with Protractor for end-to-end automated test cases. Additionally, I have incorporated BrowserStack for testing my project across multiple browsers. Within my project, there is an image upload feature for ...

Monitoring changes to a SCSS file

I'm feeling completely baffled. I've put in my best effort to resolve this issue. The problem lies with my SCSS file and its watcher that doesn't appear to be functioning properly. A regular CSS file is not being generated at all. Here&apos ...

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

What is the best way to split two divs in this manner?

Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...

When attempting to import an SVG image, a warning is generated stating: "Property `src` does not match. Server:"

I added the file-loader to my next.js project and set up my next.config.js as follows: module.exports = { entry: './src/index.js', webpack: config => { const env = Object.keys(process.env).reduce((acc, curr) => { ...

Navigating to a Different Page in Angular 7

After logging in on my login page, the dashboard component appears below the login page instead of redirecting as a new page. How can I achieve this in Angular 7? Any assistance would be greatly appreciated. Thank you! app.component.ts import { Component ...

I am looking to fetch a zip file within the MEAN stack framework

Here is frontend code (Angular):- download(user) { this.clientAPI.get(Endpoints.DOWNLOAD).toPromise() .then(res => { let blob = new Blob([new Uint8Array(res.file)], { type: 'application/zip' }); console.l ...

There is zero gutter in Bootstrap

Is it possible to use the bootstrap grid system without any gutters? I want to have 3 columns in one row like this: http://prntscr.com/6gpmhm. I have shared the markup for the CSS I am using, which is the default CSS of the framework. <section class ...

The activation of Angular 2 pipe

I currently have a variety of models in my collection. When it comes to using pipes in the template, I often run into issues. <div class="card-panel" *ngFor="let card of cards | sortByType"> <card-view [card]="card" [autoupdate]="true">< ...

What is the best way to extract a nested array of objects and merge them into the main array?

I've been working on a feature that involves grouping and ungrouping items. A few days ago, I posted this question: How can I group specific items within an object in the same array and delete them from the core array? where some helpful individuals ...

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...

Update the Kendo window scrolling feature to include fixed update and cancel buttons

I've encountered an issue while using ASP MVC and the latest version of Kendo. When I add too much content to a Kendo window, it starts scrolling vertically, which ends up hiding the cancel/update buttons at the bottom. This is not ideal as the user s ...

Leverage a provider implementation within another implementation of the same provider in Angular

Is it possible to inject one provider implementation into another implementation of the same provider in Angular? I have been unable to achieve this so far. The goal is to be able to customize the second implementation using data from the first implementat ...

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

"Utilize React and Redux to fetch data from the server after making changes with an API

I am currently using a combination of react, redux, and typescript in my project. My goal is to add an item from the react component by making an API call and then displaying whether the operation was successful or not. To achieve this, I am fetching data ...

Creating dynamic keys to insert objects

In my coding project, I am dealing with an empty array, a value, and an object. Since there are multiple objects involved, I want to organize them into categories. Here is an example of what I envision: ARRAY KEY OBJECT OBJECT KEY OBJECT ...

Getting started with accessing an API using Angular 2

I am seeking a way to navigate outside of my Angular 2 application to mywebsite.com/api. This link should direct me to an API application hosted on the same server. Here is my current route configuration. export const routes: Routes = [ {path: '& ...