Unable to utilize SASS variables in Angular from a global file, even though other styles are functioning correctly

After implementing the SASS code in my component's style, it functions correctly.

$test-color: pink;
div{ background-color: $test-color; }

However, when I transfer the definition to styles.scss, the desired outcome is not achieved. I have attempted using the (supposedly deprecated) 

@import "../styles.scss";
and the currently recommended @use "../styles.scss";. Additionally, I tried moving the color definition to colors.scss and referencing it in angular.json. The styles for classes declared in styles.scss are working fine (even without importing/using because they are referenced in the assets), but the variable is not functioning.

Some sources suggest that it should work with @include. The documentation illustrates how to assign values, however, links provided did not provide any clarity on resolving the issue at hand. Despite trying additional configuration options like:

"stylePreprocessorOptions": { "includePaths": [ "src" ] }

The error message persists as seen below:

ERROR in ./src/app/.../some.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
14 │ background-color: $test-color;
___ │ _________________ ^^^^^^^^^^^^
src\app...\some.component.scss 14:23 root stylesheet

Despite researching the error online, no satisfactory solutions were found. What steps should be taken to further investigate and resolve this issue?

cssangularsass

Answer №1

The error is caused by incorrect syntax as highlighted. It should make a reference to the source of the colors.

background-color: colors.$test-color;

Moreover, the import statement is necessary but it should be referencing the module instead of the file directly.

@use "colors";

In order to maintain a clean code base, the following should be placed in the src\colors.scss file.

$test-color: pink;

Subsequently, you can utilize it like this.

@use "colors";
div{ background-color: colors.$test-color; }

In the configuration file angular.json, the following settings need to be adjusted.

"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },

It's important to note that files prefixed with an underscore undergo different processing rules, hence why _colors.scss is recommended. Although it may work when placing auxiliary files directly in the /src directory (such as styles.scss), convention dictates they should be located in /src/assets/styles, necessitating changes to the pre-processor options as shown below.

"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }

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

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out. I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultane ...

javascriptjquerycss

Upon updating my application from Angular 14 to 16, I encountered an overwhelming number of errors within the npm packages I had incorporated

After upgrading my angular application from v14 to v16, I encountered numerous peer dependencies issues, which led me to use the --force flag for the upgrade process. However, upon compiling, I am now faced with a multitude of errors as depicted in the scr ...

javascriptangulartypescriptnpmangular-ivy

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

cssvue.jsvuetify.jsnuxt.js

Vue transition not functioning properly when hovering over text for changes

When you hover over the circular region on the website, the text and description in the red box will change. To add a fade animation effect when the text changes, I attempted to use <transition> as per the documentation provided in this link. Unfor ...

javascripthtmlcssvue.js

The CSS transition is failing to revert to its original state after being combined with animations

My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to ...

htmlcsscss-animationscss-transitions

Mirror Image Iframes

Currently, I have been tasked with constructing a side-by-side "frame" using HTML. The idea is that when the content in the iframe on the left is selected, it will appear in the iframe next to it on the same page. Here's some additional context: The ...

javascripthtmlcss

Avoid floating right elements all the way up if there are already elements floating left

I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup. You can see my codepen for a better understanding of what I'm try ...

csscss-float

Tips for saving the generated POST request ID for future use in another function

I am facing a challenge where I want to use the ID of a newly created Order as the OrderId for an OrderLine that needs to be created immediately after. After creating the Order, if I log the orderId INSIDE THE SUBSCRIBE METHOD, it shows the correct value. ...

angulartypescriptrestpost

Is there a way for me to utilize the Bootstrap carousel without it adjusting the height as the user transitions from slide 1 to slide 2?

body{ background-color: #CAF7E3; } .container-fluid{ padding: 3% 15%; } .navbar{ font-family: 'Montserrat'; font-weight: bold; } .navbar-brand{ font-size: 2.5rem; } .nav-item{ margin-right: 2rem; } #title{ padding: 8% 15%; backgr ...

htmlcss

Drag a dropdown menu to the bottom left corner and set it to full width on mobile using CSS

Check out this code snippet with CSS and HTML: CSS .flyout { position: absolute; top: 30px; right: 15px; background-color: #FFF; padding: 20px; border: 1px solid #eaeaea; z-index: 999; width: 400px; border-top: 3px solid #337AB7; disp ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to deploy static Angular builds for microservices on AWS S3 and ensure proper routing management?

Our Company's SAAS platform currently utilizes 7 to 10 Angular microservices, previously hosted on an EC2 engine with routing managed by Nginx. However, due to high costs associated with EC2, I have successfully migrated the website to a static websit ...

angularamazon-web-servicesamazon-s3routesaws-lambda-edge

Nebular specializes in crafting personalized registration solutions

I am currently working on a custom registration form that is different from the standard Nebular registration. Due to the custom form validation I have implemented, the standard registration system no longer functions as intended for me. I believe I need t ...

angularformsnebular

Angular Kendo dropdownlist and input textbox are not working together as anticipated

I'm looking to implement a dropdown list similar to Google search using Kendo Angular. However, I've encountered an issue where entering text in the textbox and pressing "Enter" passes the first matching value from the dropdown list to my compone ...

javascriptangulartelerikkendo-ui-angular2kendo-dropdown

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

Book of Tales displaying Emotion Styling upon initial load only

I'm currently working with the styled api provided by emotion in order to create a custom styled button. const StyledButton = styled(Button)` background-color: ${theme.palette.grey['800']}; width: 50; height: 50; &:hover { ba ...

csstypescriptmaterial-uistorybook

What is the best way to assign an ID to the initial table header in an asp:DataGrid for CSS styling purposes?

I am looking for a way to customize the first element in the table headers row using CSS without relying on :first_child selector. Example Code: <asp:TemplateColumn HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"> <Heade ...

.netasp.nethtmlcssdatagrid

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

javascripthtmlcssreactjshtml5-video

"Discover the step-by-step process for displaying the menu on a WordPress

After installing the new classifieds theme on my Wordpress website, I noticed that the menu from the previous theme is still showing up. However, when I hover over the menu, it disappears and only reappears once my cursor is no longer hovering over it. ...

phphtmlcsswordpress

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

javascripthtmljquerycss