What benefits does importing bootstrap.scss into styles.scss provide compared to adding it directly to the styles block in .angular.cli.json?

What are the advantages of importing bootstrap.scss into the styles.scss file compared to adding it to the .angular-cli.json styles block?

Which approach is better and why?

styles.scss

@import '~bootstrap/scss/bootstrap.scss';

vs

.angular-cli.json

"testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",

I am curious to know if there are benefits in terms of build size when only the necessary styles for a page are loaded, potentially reducing bundle size.

cssangularwebpacksassangular-cli

Answer №1

If you're open to tweaking Bootstrap (altering default padding, margin, colors, etc), you can achieve this with scss.

Simply adjust some values and you're good to go.

If you include the css in angular-cli.json, it may not be the most efficient or clean way to customize (but that's okay if it's not necessary!)

Alternatively, if you prefer not to customize Bootstrap, just add it to angular-cli.json with the css to avoid recompiling all of Bootstrap's source code unnecessarily.

Answer №2

User-specific styles should be kept in separate style files, while library styles are best imported in the angular-cli.json file. This practice helps keep the code organized and improves its readability.

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

I am looking to display the dynamic response in Angular8 in real-time

Looking for ways to dynamically bind JSON data to HTML page elements like labels and textboxes using Angular. Any insights or recommendations are welcome. { "model": "abcd.abilivcdcty.configuration", "typeId": "abcd.edge.modules.opcuamodule. ...

jsonangular

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

"Having the same meaning as $(this) in jQuery, the CSS

Is there a CSS equivalent to the Jquery selector $(this)? For example: .widget h4 { background: black } .widget:hover h4 { background: white } In this scenario, when any element with the .widget class is hovered over, the child h4 changes its background ...

cssselectorthis

AbstractControl is missing the 'controls' property in Angular4

Many blogs have discussed this error, but none specifically for angular4. I am dynamically adding and removing controls on the form. Add controls to the form during initialization ngOnInit() { this.lienHolder = this._fb.group({ ...

angularangular4-forms

Discovering more about this topic

Looking for a way to create an expandable box that enlarges when "read more" is clicked, revealing text below it. And also looking to add a button that closes the expanded text back up. Experimented with the toggletext JavaScript command, as found on this ...

javascriptcsstextspry

Why is it necessary to import Material-modules individually for various custom modules in Angular?

Within my applications, I utilize multiple modules with some being implemented through lazy loading. A common practice I have noticed is that for the lazy-loaded modules, I must import MatButtonModule (along with other modules) into their respective custom ...

angular

Tips for achieving fluid and seamless page scrolling on a website

Looking to add smooth scrolling to my website but unsure of the best method - whether to override normal mouse scrolling or pursue another approach. I'm aiming for a similar effect as seen here. Give it a try and scroll through the page. ...

phpjquerycsssmooth-scrolling

What is the best way to utilize angular2 components based on their name using ngFor?

Check out the components I've created: app-widget-resume app-widget-my-courses-learner app-widget-my-courses-teacher app-widget-my-calendar app-widget-virtual-classes I want to populate my dashboard component, called my-dashboard, by util ...

angularangular2-template

Exploring the concept of converting a data type into an interface using map operations

Recently, I started learning Angular and I've been trying to wrap my head around how mapping from a response to an interface actually works. Let's take a look at the API response I received: [ { "id": 2, "name" : &qu ...

angulartypescriptobservable

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

Tips for modifying the color of the last anchor in a list item

li elements are utilized to create breadcrumb in a shopping cart. The breadcrumb displays all anchor elements using the style defined for an 'a' element from site.css. How can I make the last anchor's color black? I attempted the style belo ...

jqueryhtmlcssbreadcrumbs

Is there a way to sort through nested objects with unspecified keys?

I'm looking to extract specific information from a nested object with unknown keys and create a new array with it. This data is retrieved from the CUPS API, where printer names act as keys. I want to filter based on conditions like 'printer-stat ...

javascriptangulartypescriptcups

Combining one item from an Array Class into a new array using Typescript

I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...

javascriptangularstringtypescriptobject

What is the best way to combine items from two separate lists into a single list by simply clicking on the items using JavaScript and PHP?

Having encountered some issues with setting up a list of items and moving them between each other, I was wondering if it is possible to have multiple lists with a link inside each item that allows for moving it to a specified list. For example, having a li ...

phpjqueryhtmlcsslist

What is the best way to choose and deselect a checkbox in Angular?

I'm currently working on an angular Todo list project where I'm tackling the challenge of implementing a select all and unselect all checkbox feature. todo.ts import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core&ap ...

angularhtml

How to create a centered div with particle.js

I'm currently working with the particle.js library to create a particle background effect. However, I am struggling to center the "container" div using flexbox due to the canvas being inserted when the HTML page is run. Could someone please provide a ...

htmlcsscenteringparticle.js

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...

javascriptjquerycsscss-selectors

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

javascriptcssreactjsmaterial-ui

Encountered Angular 7 Error: Unable to access pro due to TypeError

I've encountered an error in my Angular front-end application: https://i.sstatic.net/koqvm.png Error: index.js:3757 TypeError: Cannot read pro Here's what I have tried so far: I inspected the code but couldn't find the root cause of t ...

angularerror-handling

Navigating with Angular 7

Encountering an issue with my Angular 7 Application Here is the error message: Error: Invalid configuration of route 'dashboard'. One of the following must be provided: component, redirectTo, children or loadChildren In the process of develo ...

angularangular-materialangular-routing