Leveraging CSS custom properties globally

I have set up PostCSS parser with the help of and am currently exploring options to create a variables.css file that will hold all my theme settings.

At this point, my variable.css file appears as follows, containing a couple of variables:

:root {
  --color-white: #FFF;
  --color-black: #000;
}

I then import this file into other files where I intend to make use of these variables using @import './variables.css' or a similar method. In those files, I utilize the variables like so: 

background-color: var(--color-white)
. However, I encounter the following warning message:

Variable '--color-white' is undefined and used without a fallback [postcss-custom-properties]

csspostcsscssnext

Answer №1

If you're looking to enhance your website's styling, consider installing postcss import.

$ npm install postcss-import

Visit this post for more detailed installation instructions.

UPDATE By utilizing postcss-import, the issue was resolved. Keep in mind that there may be some issues with the latest version, so it is recommended to use version 7.x for greater stability.

Answer №2

If you're looking to pass your variables to your JavaScript code, another option is to utilize the "variables" feature of postcss-custom-properties.

Check out this sample configuration using postcss-cssnext for sharing global variables:

require("postcss-cssnext")({
  features: {
    customProperties: {
      variables: {
        primaryColor: "green",
        secondaryColor: "purple",
      }
    }
  }
})

Click here for more information on how to use CSSNext features.

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

The menuToggle feature works flawlessly on desktops after integrating my AngularJS module, but unfortunately, it is not functioning

I have successfully integrated autosuggestion using AngularJS material library into my web application. Everything seems to be working fine except for one issue. When I include ng-App="MyApp2", the menuToggle button stops functioning only on mobile devices ...

javascripthtmlcssangularjs

After deployment, certain formatting elements appear to be skewed in the React application

After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected. The majority of the styling from Material UI is intact, but there are a few dis ...

cssreactjsdeploymentmaterial-uistyles

Achieving horizontal alignment for divs in CSS can be challenging

Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...

htmlcsszurb-foundation

Adjust the navigation height to be proportional to the main content size

I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success: My goal is for the green menu section to extend down to the footer. Here is the HTML code: <div ...

htmlcss

Issues with creating modal images using only JavaScript

I am facing an issue with modal popup images. I have a collection of images and attempted to implement this code (with some modifications): https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img However, it seems to only work for the initi ...

javascripthtmlcss

Struggling to display flex items in a full-width row on a new line

Here is a code snippet where I am trying to display "0 of 2 completed" on a new line at full width. I have used flexbox for this purpose, but I am facing challenges. Can you suggest a better approach to achieve this? .container { display: flex; widt ...

htmlcssflexbox

Text overflowing from image on Bootstrap 4 card with image overlay

Having an issue with the text overlay on my image, especially on mobile (small/xs) screens where the play button and title are extending beyond the image due to long paragraph text. Which bootstrap class should I adjust to fix this issue? I was expecting t ...

htmltwitter-bootstrapcssbootstrap-4

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

I've been trying to customize the spacing between rows in a MUI Data Grid Component by overriding the default bottom border, but haven't had much success. I've experimented with different approaches such as using a theme override, adding a c ...

cssreactjstypescriptmaterial-ui

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

javascriptjquerycsshtml

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

htmlcsstwitter-bootstrapuser-interface

What might be the reason for the border not reaching the bottom of the popup in my chrome extension?

I am currently working on a Chrome extension and using Bootstrap 5 with Sass to style its popup. However, I have encountered an issue where the border of the popup does not extend to the bottom as expected. What could be causing this problem? popup.html & ...

htmlcssgoogle-chrome-extensionsass

Is there a way to automatically override the CSS cursor style?

Issue with SCSS styling on image link I attempted to modify the cursor style from pointer to default, but after saving and reloading my React app, the change did not take effect. I tried writing some code, but it seems that Stack Overflow is indicating an ...

javascripthtmlcssreactjssass

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

Designing a div with a proportional size amidst elements of fixed dimensions

I need help figuring out how to create a dynamically sized div based on the browser's height. I'm not sure where to start or how to approach this problem. The layout I have in mind includes a 50px high header, followed by the dynamic div and the ...

csshtml

Carousel Image Alignment Issue on iPhone SE Portrait Mode: All Images Centered Except One

Check out this website: It functions perfectly on Desktop browsers at all scales and works on Mobile devices in Landscape mode. However, I noticed that when using Portrait mode on my iPhone SE, the first image in the carousel appears off center in Chrome ...

jqueryhtmlcssiphonetwitter-bootstrap

How to horizontally align a logo image in the appBar using Material-UI (ReactJS)

I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...

cssreactjsmaterial-ui

Reorganizing Bootstrap 5 columns as the screen size changes

I need to change the display order of columns in bootstrap Currently I have two columns side by side in one row like this: Col A - Col B (on all screens except mobile devices) However, when the screen size is reduced or viewed on a mobile device, I want ...

htmlcssbootstrap-5

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 u ...

cssangularsass