A guide on effectively implementing CSS preprocessors in Angular 7

Exploring the world of pre-processors is new to me. I’m curious about how to integrate them, specifically postcss and lostgrid, with angular 7.

I'm attempting to incorporate this code snippet into my angular project. The code relies on postcss-cssnext and lost-grid.

@use postcss-cssnext;
@use lost;

@lost flexbox flex;
@lost gutter 0;

//more css code

Could someone guide me on incorporating these elements in my angular app?

* UPDATE *

You can implement the above code snippet without pre-processors. I made some adjustments to the code as shown here: https://codepen.io/anon/pen/BeLWeb

angulartypescriptecmascript-6sasssingle-page-application

Answer №1

If you're using Angular CLI, building postcss is not supported at the moment. You'll need to create a custom webpack configuration to handle it.

Make sure to include the postcss-loader package from here

In order to achieve this, use custom-webpack. An example can be found here

Alternatively, Angular offers 3 pre-processing CSS options: sass, scss, and less. You can choose based on your preference.

To utilize Angular CLI with pre-processed CSS, generate a new project using:

ng new my-app --style=scss

You can also specify the style flag with:

  1. --style=scss
  2. --style=sass
  3. --style=less

Below is the configuration in angular.json

"projects": {
    "awesome": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

In the schematics section, you can see the scss preprocess css option that you can switch to scss, less, or sass

For more information, refer to this article here

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 interface is incompatible with the constant material ui BoxProps['sx'] type

How can I make the interface work for type const material ui? I tried to register an interface for sx here, but it keeps giving me an error. import { BoxProps } from '@mui/material'; interface CustomProps { sx: BoxProps['sx&apo ...

reactjstypescriptmaterial-ui

Employ the 'this' attribute within _.map

I am facing an issue where I need to call a setState function within a _.map loop in React. However, the loop is losing the reference to 'this' and therefore I cannot use setState as this becomes undefined. cargaDinamica(){ _.map(this.stat ...

javascriptnode.jsreactjsecmascript-6underscore.js

Tricks for prompting Angular2 to recreate components every time they are displayed

Within our angular2 Typescript application, the functionality of our components is heavily reliant on the parameters they receive from the router, resulting in dynamic behavior based on these inputs. The current stage of development for the application is ...

angularjsangularangular-routingng2-bootstrap

Issue: The 'typeOf' function is not exported by the index.js file in the node_modules eact-is folder, which is causing an import error in the styled-components.browser.esm.js file in the node_modulesstyled

Every time I attempt to start running, there are issues with breaks in npm start (microbundle-crl --no-compress --format modern,cjs) I have attempted deleting node_modules and package-lock.json, then running npm i again but it hasn't resolved the pro ...

reactjstypescriptstyled-componentsmicrobundle

Choose everything except for the information determined by the search

Currently facing an issue with the select all functionality. I found a code snippet on this link but it's not exactly what I need. I want to modify the select all feature so that it is based on the search value. For instance, if I have a set of data ...

angularangular8

Setup a Single Page Application on Google Cloud Storage with Load Balancer and Content Delivery Network

I am currently exploring how to deploy an Angular or React web application on Google Cloud using GCS, Load Balancer, and CDN. I've configured the LB and the GCS using the urlRewrite feature. However, due to the LB's limitation on full URL rewrit ...

reactjsangulargoogle-cloud-platformgoogle-cloud-storageload-balancing

Issue with Angular app using Azure AD not redirecting to specified path after successful login

My angular webapp is connected to Azure AD/Entra Id for user authentication. The redirect URI in my Azure AD app is set as "http://localhost:4200/translate". Here are my defined routes: const routes: Routes = [ { path: 'translate', path ...

angularazure-active-directorymicrosoft-entra-idmsal-angularazure-entra-id

Reacting to Appwrite events in a React Native environment

My React Native application encounters an error when subscribing to realtime events. The error message reads as follows: ERROR Error: URLSearchParams.set is not implemented, js engine: hermes. appwriteClient .subscribe( `databases.${APPWRITE_DATAB ...

typescriptreact-nativeappwrite

The angulartics2 event is not functioning correctly

I have implemented the angulartics2 library in my project. import { Component } from '@angular/core'; import { Angulartics2On } from 'angulartics2'; @Component({ selector: 'random-component', directives: [Angulartics2On] ...

google-analyticsangularangulartics

ElementRef is missing from the source code

One particular feature of my template is the utilization of *ngFor directive. <div #listofbars *ngFor="let points of pointsNormalized; let i =index" [attr.data-index]="i"> <div *ngIf="i < 10" class="ranking d-flex align-items-center" [ngCla ...

angularangular6angular-animations

Contrasting the utilization of `typeof` with a constant and `enum` in TypeScript

Can you explain the distinction between using typeof with a constant and an enum in TypeScript? For example: const TYPE_A = 'a' const TYPE_B = 'b' type MyType = | typeof TYPE_A | typeof TYPE_B type Result = { name: string type ...

typescript

Creating a new section in an Angular 2 project can be achieved by implementing an onclick function that is

Whenever I click the new button, a section with 3 fields should appear. However, even though I am not receiving any errors, I can't seem to figure out what I'm doing wrong. Click here for an example Here is the HTML: <form *ngFor="let ...

angular

Dealing with routing problems within sub-routes using Angular 2 and Express, attempting to serve content from sub-folders

I am currently using Express to serve a local Angular2 application. To enable the Angular2 app to access various node_modules from Express, I have set up the following configuration: config.dependencies = [ { staticPath: './node_modules/@angular/&a ...

angularexpressangular2-routing

Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription? connect(): Observable<any[]> { this.userId = this.authService.userId; this.habits$ = this.habitService.fetchAllById(this.userId); this.s ...

javascriptarraysangulartypescriptobservable

What is the best way to integrate ag-grid with Observable in Angular 2?

After conducting extensive research on the Internet, I am still struggling to connect the pieces. My angular2 application utilizes an Observable data source from HTTP and I am attempting to integrate ag-grid. However, all I see is a loading screen instead ...

typescriptangularobservableag-grid

Purging and Rebooting Material Selection

Despite the numerous questions on this topic, none of the solutions provided seem to be effective for my particular issue. In my Angular application, I have a series of interconnected mat-select elements. The selection made in one mat-select influences th ...

angularangular-material

How can I swap a string for a symbol in JavaScript?

Is there a way to convert the text @abc some text here to <a href="some_url">@abc</a> some text here using JavaScript? Are there any libraries that can help with this task? ...

javascriptreactjstypescriptvue.js

What is the best way to send various parameters to a component using [routerLink] or router.navigate?

My app-routing.module.ts is configured as shown below: const routes: Routes = [ { path: "branches/:branch", component: BranchesComponent }, // ... ]; In addition, in my app.component.html, I have the following code: <li> ...

javascriptangulartypescript

How can I determine the existence of an S3 bucket and, if it doesn't exist, create it using TypeScript CDK?

I am currently facing an issue where I need to verify the existence of a bucket in the account and either create a new one if it doesn't exist or use the existing bucket My attempt at achieving this is as follows: import {Bucket} from 'aws-cdk-l ...

typescriptamazon-web-servicesamazon-s3aws-cdk

The export 'ChartObject' is not available in highcharts

Trying to integrate highcharts into my Angular 4 project has been a bit challenging as I keep encountering the following error: highcharts has no exported member 'ChartObject' I have experimented with different options such as angular-highchart ...

angulartypescripthighcharts