Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project, I want all the .scss files within the "sasstyles" folder to be compiled as .css files and copied to the assets folder. How can I achieve this in Angular 5 or later?

<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/">
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='./assets/css/common.css' rel='stylesheet' type="text/css">
</head>

<body>
  <app-root></app-root>
</body>

</html>
cssangularjsangularsass

Answer №1

I am facing a similar issue as well. After some investigation, I have discovered the following solution. Within the build options in angular.json:

"styles": [
    "src/styles.scss",
    {
        "input": "src/sasstyles/something.scss",
        "inject": false,
        "bundleName": "something"
    }
]

This will generate a "compiled" something.css file in the main output directory. Sadly, I have not been able to find a way to move this result into the assets folder. It appears that there was previously a workaround that allowed you to specify it like this:

"bundleName": "assets/something"

However, this no longer works (*Edit: By this, I mean the workaround/hack to specify subfolder is no longer functional. The basic solution does work, but places the resulting css directly under /dist). More information can be found here: https://github.com/angular/angular-cli/issues/20360

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

What are some ways to customize the appearance of gridlines in a PrimeNG p-table?

Currently, I am attempting to eliminate or modify the color of the gridlines on my p-table. I have gone through the code in the browser to locate the specific element responsible for these lines, but unfortunately, it has eluded me thus far. Even after t ...

angularprimengprimeng-datatable

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

Obtain both the key and value from an Object using Angular 2 or later

I have a unique Object structure that looks like this: myCustomComponent.ts this.customDetails = this.newParameter.details; //the custom object details are: //{0: "uniqueInfo", // 5: "differentInfo"} The information stored in my ...

htmlangulartypescript

Error: A cyclic dependency cannot be instantiated. The ApplicationRef ("[ERROR ->]") is occurring in the NgModule AppModule within ./AppModule@-1:-1

I recently implemented the following code in my app.module.ts file: providers: [ AppConfigService, { provide: APP_INITIALIZER, useFactory: (config: AppConfigService) => () => config.getAppConfig(), ...

angular

The issue with AngularJS multiple $http requests failing to fetch accurate data

I'm having issues with my AngularJS controller and service modules. I want to refresh custController.allCustomers after adding a new customer so that the UI displays the new data. However, when I call custController.createCustomer, the new customer do ...

javascriptangularjs

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag. Previously, the <a> tag was written like this: <a type="button" class="uk-button uk-button-link" href="#e ...

cssvue.js

The double curly brackets in Angular for text interpolation are failing to work, causing the variable values to not be shown on display

I'm having trouble getting the details of a student to display on my app. Here's the code: import { Component, OnInit } from '@angular/core'; import { Student } from '../student'; import { ActivatedRoute } from '@angular/ ...

angulartextstring-interpolation

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

"An error occurred while trying to resolve "npm" from npm.fontawesome.com

Within my Angular project, I am utilizing a module from When I run the following command: npm --loglevel info install grun locally, it finishes without any issues. However, when I run this command on the build server, an error occurs. In my .npmrc file: ...

angularnpmbambooangular-fontawesomefontawesome-4.4.0

Passing data as a parameter from the view to the controller using AngularJS

I am attempting to retrieve data from a view, which must be passed as a parameter in a function in order to populate an array in the controller. However, I am not receiving any objects in return. Here is what I have tried: VIEW <div ng-repeat="cssfram ...

javascriptangularjsparameterspush

methods for transferring javascript variables to modal

<div> <h5> <a href="<?php echo base_url(); ?>/vendor/home/projects" >Return to Projects</a> </h5> <div> <div class="container"> <div class="row"> ...

javascriptphpjqueryhtmlcss

Exploring the functionality of the WHERE function in Firebase with Angular

Current Objective: Our main focus here is to allow users to post within their designated Organization Group. These posts should remain exclusively visible within the specific Organization Group they are posted in. To achieve this, I have attempted to impl ...

angulartypescriptfirebaseionic-frameworkgoogle-cloud-firestore

Method in AngularJS Controller Instance

I have a unique angular js controller where I am structuring it for inheritance by other controllers. Rather than defining the function as a single one within the angular's controller function, I am taking a different approach: function SomeCtrl($ ...

angularjsangularjs-controller

The problem arises from misinterpreting MIME types when serving SVG files, causing the resource to be seen as an image but transferred with

Having some issues targeting SVG images with CSS to use as backgrounds on certain elements. When I try to access the image directly here, it works perfectly fine. However, when using it in CSS, I encounter the following error: Resource interpreted as Imag ...

cssapache.htaccesssvgmime-types

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

javascriptcssgoogle-chromeweb-applicationspage-refresh

Adjusting various angular-cli configuration files or providing input variables

My application caters to different customers, requiring personalized configurations based on their needs. I am looking for a way to customize the settings in the angular-cli.json file each time I run ng build. Is there a method to: 1) Dynamically cha ...

angulartypescriptangular-cli

How can I use TypeScript to copy data from the clipboard with a button click?

One of the functionalities I have implemented is copying data to the clipboard with a button press. However, I am now looking to achieve the same behavior for pasting data from the clipboard. Currently, the paste event only works when interacting with an i ...

angulartypescriptclipboard

Experimenting with an Angular 2 component using a simulated service

Currently, I am experimenting with testing an Angular2 component that relies on a service. In order to conduct the test effectively, I aim to provide a stubbed service. However, it appears that the test component does not recognize this stubbed service. ...

angularunit-testingmockingkarma-jasmine

A guide on fetching JSON data into a Laravel controller

Among the plethora of inquiries scattered on StackOverflow, this particular one has caught my attention. I can vouch that I've exhaustively attempted all available solutions to no success. The predicament at hand involves transmitting JSON data from ...

angularjsjsonlaravelrequest

Utilize the input type=date value in the date function to obtain a specific format

How can I pass the value of input type=date to a JavaScript date function? In my HTML code, I have used: <input type=date ng-model="dueDate"> <input type="time" ng-model="dueTime"> <button class="button button-block" ng-click="upload_dueda ...

javascriptsqlangularjshtml