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

Struggling to determine the necessary modules to import in order to successfully integrate Firestore with Angular services

Recently, I developed a simple service with the following structure: @Injectable({ providedIn: "root" }) export class ItemService { private db!: CollectionReference<DocumentData>; constructor(private firestore: Firestore) { this. ...

angularfirebaseimportlazy-loadingimporterror

Attempting to modify the contents of a div by utilizing the CSS :hover pseudo-class

I recall seeing this technique used before, but I am struggling to remember where. My goal is to modify the content of a div when the css :hover state is activated. Below is the CSS code that I am attempting to make work: .mWin_close:hover div.new-label ...

htmlcss

What is the method for retrieving a specific value following the submission of an AngularJS form?

Here is how my form begins: <!-- form --> <form ng-submit="form.submit()" class="form-horizontal" role="form" style="margin-top: 15px;"> <div class="form-group"> <label for="inputUrl" class="col-sm- ...

javascriptangularjs

I am experiencing the issue of unexpected borders showing up on the HTML/CSS page that I designed

Greetings, amazing community at StackOverflow! I recently completed an HTML/CSS Project as part of a Codecademy Intensive course. If you're curious to see the project in action, feel free to check it out on GitHub by visiting this link. One thing I ...

htmlcss

Invoke index functions within a component

I have a widget/component written in Angular 4 within the index.html file. Before and after this angular app, there are various HTML elements due to the nature of it being an additional component for the website. The head section of the index file include ...

javascriptangulartypescriptbootstrap-4bootstrap-select

The switch switches on yet another switch

Greetings everyone, Currently, I am in the midst of my exam project and creating a mobile menu. The functionality is there, but unfortunately, when closing the menu, it also triggers the search toggle which displays an unwanted div, becoming quite botherso ...

javascriptjqueryhtmlcss

MTG Life counter. Display fluctuations in count

I am currently working on a fun project creating an MTG (Magic The Gathering) life tracker, even though the code is quite messy. Despite its flaws, it still gets the job done. Click here to view the MTG life tracker https://i.stack.imgur.com/Su17J.png ...

javascripthtmljquerycssecmascript-6

Guide on how to navigate to a different view

A local notification is supposed to load a specific view when clicked, but currently it is not reaching the awake controller. However, the message "I be clicked" does appear in the console, indicating that the location line is being reached by the notifica ...

angularjsionic-framework

Issue with Socket.io emit failing to work (when accessing a specific URL)

I am currently working on an application that requires receiving signals from external hardware equipment. These signals are captured by redirecting them to a specific URL in the app: '/impulse/:id'. Although I am able to capture the signal, it ...

node.jsangularjsexpresswebsocketsocket.io

Angular indicates that there is a problem with the property 'x' as it is not found in the type 'y[]'

I am trying to display the details of users using the *ngFor directive, but encountered an error earlier. Here is the code snippet: this.users=[ // first user { firstName: 'John', lastName: 'Doe', c ...

angular

What are the steps to update data using Angular?

I am currently working on a project to create a simple webpage that allows users to add values to a database. The database only contains an ID and a value, which should also be displayed on the page. Although my code is functioning correctly and I can suc ...

angular

Div expanding beyond intended size when media reaches maximum 468 pixels

When zoomimg is set to width: 145px; height: 145px; it ends up pushing the text that should be inside its parent element out of the parent. If you want to see the Zoomimg ProjectKort divs, check out the code below: .projectkort{ margin: 10px 0px 10px 0 ...

htmlcss

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

Mutually reliant drop-down menus: 'Changes in expression detected after it was verified' (Angular2 + Polymer)

It is my understanding that Angular performs two checks for changes per round, and this error occurs when the results from these checks are not equal. I am struggling to see why this code is causing the issue and how I can resolve it. You can find an exam ...

angularpolymer

Can you explain how to modify the hover color of a word with select letters already colored using CSS?

Changing colors of a link before and during hover state One problem I'm facing is having a link where the first and last letters are red while the ones in between are black. This color combination should remain the same, even if the link has been vis ...

htmlcss

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...

javascripthtmlcssreactjsmaterial-ui

Mastering the Art of Displaying Every Side of a Spinning Cube Using HTML and CSS Animations

As I navigate the online world, my goal is to create a dynamic animation of a rotating cube with an image on each face. Despite my efforts, I am struggling to display all faces simultaneously, especially the front and back faces. I have explored various so ...

htmlcsscss-animations

Issue encountered during the process of importing Excel information utilizing the xlsx library

Currently, I am attempting to incorporate excel data into my angular application using the following library: xlsx However, upon downloading the project and attempting to run it locally, I encountered an error when trying to upload the excel file: Uncau ...

javascriptangularjsxlsxlsx

Webpack and TypeScript are throwing an error stating that `$styles` is not defined

I've encountered an issue with my typescript SharePoint spfx solution. After compiling using webpack, my $styles variable becomes undefined even though I am able to use the class names directly. It seems like there might be a configuration problem at ...

typescriptwebpacksasswebpack-style-loader

What is the best way to limit the number of items displayed in a Bootstrap card?

While using bootstrap cards to display content, I encountered an issue when integrating it with the backend for looping. The items were continuously added to the right side instead of being set in columns of 3 and continuing straight down. It should look ...

javascripthtmlcssbootstrap-4