Understanding the integration of sass with webpack in an Angular 4 project

Is it possible to reference a sass file instead of a css file directly in the index.html?

If so, how does webpack compile the sass into a css file? Additionally, what is the most effective way to bundle the sass file when building the application?

The versions I am utilizing are as follows:

webpack(3.5.5), angular/cli(1.4.1) and angular4

My directory structure is structured like this,

src
├--- assets
|    ├--- sass
|    |    ├--- common.scss
|    |    ├--- base.scss
|    |    ├--- custom.scss
|    ├--- css
|         ├--- common.css
|         ├--- base.css
|         ├--- custom.css
|
├--- index.html
├--- .angular-cli.json
cssangularwebpacksass

Answer №1

Firstly, it's important to note that browsers do not recognize scss or less directly. Therefore, you need to compile and convert them into CSS before running in your browser.

If you are working with Angular CLI, there is a simple way to achieve this without the need for additional configuration.

Setting up a new CLI project:

When generating your project, you can specify using SCSS instead of CSS by passing a flag to the CLI command.

ng new projectname --style scss

For an existing project:

If you already have an Angular CLI project, you can edit the .angular-cli.json file to switch from CSS to SCSS.

Ensure your styles are in SCSS format:

  "styles": [
    "/assets/scss/common.scss",
    "/assets/scss/base.scss",
    "/assets/scss/custom.scss",
    "/asset/scss/common.css",
    "/asset/scss/base.css",
    "/asset/scss/custom.css",
    "styles.scss"
  ],

Set the default style extension to SCSS:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

For including external JavaScript libraries, use a scripts block and add your scripts there. They will be automatically included in your build process.

  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ],

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

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

javascripthtmlcss

The application is having trouble accessing the property 'isXXXXX' because it is undefined

My attempt to utilize a shared service in one of my components has been successful when used with the app's root component. However, I encountered an error when trying to implement it on another module or dashboard. shared/authorize.service.ts @Inje ...

angulartypescriptangular-services

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

javascriptcssreactjsreact-native

Angular 4 enum string mapping reversed

Here is an example of a string enum: export enum TokenLength { SIX = '6', EIGHT = '8', } I am trying to retrieve the string value 'SIX' or 'EIGHT' by reverse mapping this enum. I have attempted various methods: ...

angulartypescriptenums

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

Circle of Progress Completion

I am currently working on developing a methodology or formula to complete a circle based on a given percentage. My progress so far can be seen in the following images: https://i.stack.imgur.com/nr21h.png I aim for the circle to fill up based on an incre ...

cssgeometryprogresscalculation

Automatic verification of OTP in Ionic 3

Seeking assistance for implementing auto OTP verification in a project I am working on. After the user enters their phone number, I have come across some examples for Ionic 1 with Angular 1 online. However, I am specifically looking for examples using Io ...

angulartypescriptionic-framework

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

I am seeking assistance with implementing a Javascript onclick Dropdown Menu. The current issue I am facing is that when one menu is opened and another menu is clicked, the previous menu remains open. My desired solution is to have the previously open menu ...

javascripthtmlcss

Tips for integrating scroll-snap and jQuery's .scroll() function together

I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...

jquerycssscroll

What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

In my TypeScript file, I have the following function: ngOnInit() { if (sessionStorage['loyalPage']) { this.page = Number(sessionStorage['loyalPage']); } this.webService.getLoyalPlayers(this.pag ...

angulartypescript

Which is the better choice for simply invoking a service method - subscribe or toPromise?

When implementing the search method below, I simply assign the value of BehaviourSubject in the service. However, I am unsure whether it is possible to execute this operation without using either subscribe() or toPromise() after the .pipe() block in the ...

javascriptangulartypescriptpromisesubscribe

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Extending image across several rows within a form

I'm facing an issue with trying to display an image across multiple rows in a horizontal Bootstrap form. The current layout looks like the image below. However, I want the profile picture on the left to span multiple rows of the input field. As it sta ...

htmlcsstwitter-bootstraptwitter-bootstrap-form

Adjust the dimensions of input tag depending on the length of content in Angular

Is there a way to dynamically set the size of the input tag in my HTML based on the length of the ng-model value? I attempted this approach: <span>Node Path: <input for="nodeName" type="text" ng-model="nodePath" size="{{nodePath.length()}}"ng- ...

javascripthtmlcssangularjs

Challenges with Css Specificity

I'm having trouble adding a specific class to certain div elements. Here is the div in question: <div class="form-control drop-down-select"> </div> This is the CSS I have applied: .form-control.drop-down-select{ max-width: ...

angularprimeng

What is the most common method for creating a dropdown menu for a website's navigation?

Is there a common approach to creating an interactive drop-down navigation menu in the industry? I have searched on Google and found multiple methods, but as a student working on my first big web project, I am hoping to find a standard practice. I don&apo ...

javascripthtmlcssdrop-down-menustandards

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

javascripthtmlcsssvg

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

I have been attempting to call a service from my login.ts file but I am encountering various errors. Here is the code snippet in question: login.ts import { Component } from '@angular/core'; import { Auth, User } from '@ionic/cloud-angular ...

angulartypescriptionic-frameworkionic2

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view. Unfortunately, I attempted the following method without success. Any advice or solut ...

javascripthtmlcss