What is the best way to pass a CSS root constant to a separate CSS file?

In my Angular test project, I'm experimenting with using the same colors repeatedly. To achieve this, I created a constants.css file where I defined all my root constants, which currently consist of colors. However, I've hit a roadblock when attempting to utilize these constants in the CSS files for individual components.

I attempted to include constants.css directly into the HTML file but was unsuccessful. I tried both @import url("constants.css") and @import "constants.css", but neither method worked as expected.

Here is an excerpt from the constants.css file:

:root {
    --primary-color: #2c3e50;
    --secondary-color: #f1c40f;
    --background-color: #ecf0f1;
    --accent-color: #c0392b;
}

And here is a snippet from the nav.component.css file:

@import url("../../../constants.css");

a.logo {
    color: var(--secondary-color);
}

Despite expecting the text of my logo to be yellow, it remains the default black color.

cssangular

Answer №1

Make sure to properly declare your variables in your CSS file if you want to use global variables:

@value --secondary-color from "here should be your address";

a.logo {
    color: var(--secondary-color);
}

For example:

shared.css:

:root {
    --primary-color: #2c3e50;
    --secondary-color: #f1c40f;
    --background-color: #ecf0f1;
    --accent-color: #c0392b;
}

In your main.css, include @value --secondary-color like this

@value --secondary-color from "./shared.css";

.background {
    background-color: var(--secondary-color);
}

Don't forget to link your CSS files:

<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>

Remember, the order of declaration of stylesheets is important.

Answer №2

I've encountered a problem where the import feature is not functioning properly due to its Angular nature. I tried importing my constant into the main style.css file, but importing it into individual css files doesn't seem to work at all.

The correct solution can be found within the provided link.

Troubleshooting: Angular 6 Less CSS Import Issue

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 is the best way to execute multiple functions simultaneously in Angular?

Within a form creation component, I have multiple functions that need to be executed simultaneously. Each function corresponds to a dropdown field option such as gender, countries, and interests which are all fetched from the server. Currently, I call th ...

angulartypescriptrxjs

Tips for incorporating child components when creating unit tests in Angular 2

While working on my component, I encountered an issue with the child component during unit testing. An error message is appearing stating that the child component is not defined. Any advice or solutions would be greatly appreciated. Thank you in advance. ...

javascriptangular

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

javascripthtmlcssag-grid

What is the process of making circle or square shapes with text inside using React, without the use of SVG images?

Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: https://i.sstatic.net/iHZgy.png I attempted the code below but it did not render any shapes: import React from &apos ...

javascripthtmlcssreactjs

Can a CSS class be added to a form_row in Symfony 4 Twig?

Need help with adding a CSS class to the entire form_row in a Symfony 4 twig template! Currently, my code only adds the class to the input tag, but I require it to be added to the parent div container. Here is the current code snippet: {{ form_ ...

htmlcsssymfony4

`Turn nested JSON into a formatted list using jquery`

I am currently facing two challenges: I am having trouble with the HTML structure, as shown in the image below Current HTML structure: https://i.stack.imgur.com/GH46J.png Desired HTML structure: https://i.stack.imgur.com/Dq3Gn.png How can I create d ...

javascriptjqueryhtmlcssjson

Styling Rules for WebKit Browsers

Is there a method to apply a particular CSS style for a div based on whether the user is accessing the page from a Chrome browser on a Desktop or an Android device? .myDIV{ [if CHROME???] width: 280px; [if ANDROID???] width: 100%; } Seeking guidance on ...

androidcssgoogle-chrome

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

The vertical alignment of the wrapper div does not support multiple lines of text

I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could s ...

htmlcss

The text box and buttons are not properly aligned

https://i.stack.imgur.com/lxeKw.png I am puzzled by the misalignment of my buttons and text box. <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label> <div class="col ...

htmlcssbootstrap-4

Customizing npm package within an Angular 13 project

Currently, I am working on an Angular application (v13.3.10) that relies on the ngx-markdown package. Unfortunately, I have encountered several bugs within this package and I am attempting to make edits locally in order to see changes reflected when runnin ...

angularnpmwebpackpatch-package

What happens with the styling in this project when the CSS file is blank?

As a first-year CS student in university, I have been diving into the world of React.js. Currently, I am exploring a resume project and noticed that both app.js and index.js files are empty. I am curious to know how the styling is achieved in this project. ...

javascriptcssreactjsstyling

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

I have been exploring ways to easily close the modal that appears after clicking on an image. My setup involves using bootstrap in conjunction with Angular. <img id="1" data-toggle="modal" data-target="#myModal" src='assets/barrel.jpg' alt=&a ...

htmlangulartypescriptbootstrap-4

What is the process for creating a unit test case for an Angular service page?

How can I create test cases for the service page using Jasmine? I attempted to write unit tests for the following function. service.page.ts get(): Observable<Array<modelsample>> { const endpoint = "URL" ; return ...

angulartypescriptjasminekarma-runner

Angular 6 - implementing a dynamic carousel with bootstrap styling

I am currently working on a carousel using bootstrap4 where the images are sourced from an array. However, I am facing an issue where the first element must have the active class. <div id="carouselExampleFade" class="carousel slide carousel-fade" dat ...

angularhtmlbootstrap-4

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

Should we avoid styling HTML tags?

Would it be considered poor practice, for instance, to apply the following CSS rules to all images on my webpage in order to make them responsive: img { display: inline-block; height: auto; max-width: 100%; } Instead of using img-responsive on each ...

htmlcss

I am looking to invoke the Token API from Microsoft Graph during an Angular 7+ HTTP request

My goal is to make an API call from my Angular application to retrieve an access token from . With this token, I then aim to access the https://graph.microsoft.com/v1.0/users/##UserId##​​​​​​​​​​​​​/getMemberGroups endpoint withou ...

angularazure-active-directorymicrosoft-graph-apiadal

What is the best way to deselect the first radio button while selecting the second one, and vice versa, when there are two separate radio groups?

I am looking to achieve a functionality where if the first radio button is selected, I should receive the value true and the second radio button should be unselected with the value false. Similarly, if the second radio button is selected, I should receive ...

javascripthtmlangular