The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here.

After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file.

However, when I serve or build the website, those CSS styles are being inlined instead of being externally included, which is not what I expected or need.

In addition, the component-level SCSS cannot access variables defined in the global style.scss file (I may have misunderstood this).

How can I use SCSS to produce an external CSS file for delivery?

Thank you! Paul

javascriptcssangularsassangular-cli

Answer №1

Locate the line "styleExt": "css" in angular-cli.json file and change it to "styleExt": "scss". After that, include "styles.scss" in the "styles":[] section of .angular-cli.json

If you wish to use SCSS in a component, specify it like 

styleUrls: ['app.component.scss']

Create a variable.scss file for global variables and import it into all other SCSS files.

Answer №2

Here's a suggestion to solve your issue:

"server:dev": "ng serve -e dev --port 9000 --progress --watch --open --ec=true",

If you add '--ec=true' as shown above, it should fix the problem for you. Alternatively, if that doesn't work, you can eject your angular-cli application and manually configure your webpack file by adding additional loaders. https://github.com/angular/angular-cli/wiki/eject

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

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

csspseudo-element

Is there a way to identify and remove empty spaces and carriage returns from an element using JavaScript or jQuery?

Is there a way to easily remove empty elements from the DOM by checking if they contain only whitespace characters or nothing at all? I am attempting to use $.trim() to trim whitespace in empty elements, but some are still returning a length greater than ...

javascriptjquerytrim

Create a jQuery script that generates clickable links when a user is mentioned in the

Hey there, I've been incorporating this fantastic plugin created by Hawkee into my project. It functions similarly to Twitter, allowing users to @mention others. However, I'm encountering issues with the output when using the following method: u ...

phpjavascriptajaxjsonjquery-plugins

Develop a novel function

I am working on a new Order page where users can select a category, then a service, and fill out the quantity field for their order. I have an idea to create a function using @if and @else statements. In this function, I want to display the quantity fiel ...

javascriptphphtmllaravel

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

I'm trying to make the text adjust its center to the height of an image that changes size when the page is resized. Here's what I have so far: HTML <section id="eyeCatcher"> <div id="catchContainer" > <div id="eyeCatchQ ...

htmlcssimageresponsive-design

Avoid allowing image uploads that are too large in size

Is there a way to block an image from being uploaded if it exceeds a specified size limit? Currently, I am using angular-base64-upload and although my error message appears when the image is too large, the image still gets uploaded. I'm puzzled as to ...

javascriptangularjsnpm

Exploring Angular: Adding elements to formArray and tracking form value modifications

I am currently working on a Form that utilizes a formArray : initForm() { this.mainForm = this.formBuilder.group({ foos: this.formBuilder.array([], [Validators.required]), }); getFoos(): FormArray { return this.mainForm.get(&apos ...

angularformarrayvaluechangelistener

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

javascripthtmlcss

Tips for entering multiple values in an input field

I am attempting to implement a feature where multiple names can be added from an autocomplete drop-down menu to an input field, similar to the example shown below: https://i.sstatic.net/D4hGA.jpg Here is what I aim to create: Upon selecting an item from ...

javascripthtmlcss

Error message: Suitescript encountered an unexpected issue - TypeError: The function this.handleChange is not defined

For the past year, I have been immersed in Suitescript development. In my current project, I have a client script that triggers on Save for a Journal Entry. However, upon trying to save, I encounter an error message that reads "TypeError this.handleChang ...

javascripterror-handlingnetsuitesuitescript

Discovering the generic type from an optional parameter within a constructor

Looking to implement an optional parameter within a constructor, where the type is automatically determined based on the property's type. However, when no argument is provided, TypeScript defaults to the type "unknown" rather than inferring it as "und ...

javascripttypescript

Every time I attempt to compile NodeJS, I encounter a compilation error

Within mymodule.js var fs = require('fs') var path = require('path') module.exports = function(dir, extension, callback){ fs.readdir(dir, function(error, files){ if(error) return callback(error) else { ...

javascriptnode.js

Angular 14: A collection and schematic must be provided for execution to proceed with the process

I've recently started learning angular. After installing the latest version, I created an app called "test" using the command ng new test. Next, I opened the app in Visual Studio Code and tried to create a new component by entering the command: ng g ...

angulartypescriptcollectionscomponentsangular-schematics

Having trouble getting the Underscore.js template to function correctly with JSON data

Hello there! I have some PHP code $arr = array("title"=>"sample Title", "body"=>"151200"); echo json_encode($arr); The data output is: {"title":"test Title","body":"151200"} When I attempt to use this JSON output in Underscore, I encounte ...

javascriptphpjsonunderscore.js

Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this? <div class="row"> <div class="span9"> ...

javascriptjqueryhtmliframe

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

javascriptjqueryhtmlcss

Looking for assistance grasping the concept of using a for loop in MongoDB's aggregate method

This code snippet is designed to maintain the order of an array (var list) when utilizing mongoDb's $in clause effectively. Although, I must admit that the logic behind it is not entirely clear to me. I can see that it's iterating in reverse to ...

javascriptmongodbaggregation-framework

Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is: pages -[category] -[slug].js My goal is to access the category value when a user visits category/slug. Currently, I have the category ...

javascriptnext.js

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

javascriptvue.jsaxios

Leveraging React Native to retrieve information from a promise in JSON format

After successfully fetching the JSON data, I now have an array. My question is how can I utilize the elements within this array in a React Native environment? Below is my current approach: export default function display() { const fetching = async() => ...

javascriptreactjsreact-nativefetchasync.js