NuxtJS is unable to load multiple CSS sheets that contain variables

Currently in the process of creating a blog with NuxtJS. You can find my repository here. Additionally, I have raised this issue on the Nuxt repository as well, which you can view here.

The main issue at hand revolves around loading style sheets in my configuration file.

 css: [
    '~./css/reset.css',
    '~./css/vars.css',
    '~./css/global.css',
    '~./css/ui.css'
  ],

It appears that variables defined in one stylesheet cannot be accessed by others. The variables from vars.css do not carry over to global or ui.css.

Interestingly, it seems like only box-shadow properties are working across stylesheets, while other variables fail to do so.

javascriptcssstaticvue.jsnuxt.js

Answer №1

To resolve the issue, ensure that you are using either ~/ or ./, but not ~./. Here is the corrected code snippet:

css: [
    './css/reset.css',
    './css/vars.css',
    './css/global.css',
    './css/ui.css'
  ],

The usage of './' signifies navigating to the root folder and then locating /css/... within it.

On the other hand, ~/ refers to the home directory.

For additional information, refer to these related posts:

Explaining the tilde key in a file path

How to link a .css file from another folder

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 change an asterisk symbol into 000 within a currency input

In my ASP.NET application, I have a currency text box. I have the following script: <script type="text/javascript> function Comma(Num) { //function to add commas to textboxes Num += ''; Num = Num.replace(',', ...

javascriptasp.netcurrency

Angular Unit testing error: Unable to find a matching route for URL segment 'home/advisor'

Currently, I am working on unit testing within my Angular 4.0.0 application. In one of the methods in my component, I am manually routing using the following code: method(){ .... this.navigateTo('/home/advisor'); .... } The navigateTo funct ...

javascriptangulartypescriptjasmine

Querying a list of objects with nested pointers using the Parse.com Javascript API

How can I efficiently query my Parse.com backend for a list of objects that contain specific pointers within them? For example, if ObjectA contains a list of pointers to ObjectB, how can I query for all ObjectA's that have ObjectB in their list? I a ...

javascriptparse-platform

What is the best way to retrieve the latest files from a Heroku application?

Having recently migrated my Discord Bot to Heroku, I faced a challenge with retrieving an updated file essential for code updates. I attempted using both the Git clone command and the Heroku slugs:download command with no success in obtaining the necessar ...

javascriptnode.jsgitherokudiscord.js

Encountering issue with building/deploying a node application on Red Hat OpenShift due to the error message "Unable to resolve output image"

After linking my GitHub repo to an OpenShift app and adding the necessary properties to package.json, I encountered an issue with the Builds section. The status message reads "Output image could not be resolved" and it shows that the build has not starte ...

javascriptnode.jsexpressopenshift

How can I eliminate the spacing in CSS?

Seeking assistance to eliminate the extra space above the navbar. Can someone guide me through this? Here is my HTML code for reference: And here is my CSS code: ...

htmlcssbootstrap-5

Guide to sending a similar request as a curl command through a JavaScript file

After reviewing this Stack Overflow post titled "JavaScript post request like a form submit", I came across a similar situation. Currently, I have a curl command that performs as expected: curl -v -X POST -H "application/json" -H "Content-type: applicatio ...

javascriptjsoncurl

The issue with executing event.keyCode == 13 in Firefox remains unresolved

I've implemented a function that sends comments only when the "enter" key is pressed, but not when it's combined with the "shift" key: $(msg).keypress(function (e) { if (event.keyCode == 13 && event.shiftKey) { event.stopProp ...

javascriptjqueryevents

The ReactJS Material Table Tree mode experiences delays when new row data is introduced

My Reactjs app utilizes the material-table widget within a component: render() { return ( <div> <Row> <MaterialTable title="Mon équipement" style={{ width: "100%", margin: "0%" }} ...

javascriptreactjstypescriptmaterial-uireact-component

Tips for streamlining IF statements with multiple conditions

When looking at various code samples, I often see something like this: if(X == x && A == a){ } else if (X == y && A == b){ } else if (X == z && A == c){ } else if (X == zz && A == d){ } Alternatively, there are conditions ...

javascripttypescriptconditional-statementsrefactoringnested-if

Retrieving data with JQuery when encountering an XHR error

When I send a jQuery AJAX request and receive a successful response, I am able to retrieve my JSON data. However, if the response code is anything other than 200, I am unable to access the data in the jQuery callback function. This data is crucial as it co ...

javascriptjqueryjsonxmlhttprequest

Generating Tree Structure Object Automatically from Collection using Keys

I am looking to automatically generate a complex Tree structure from a set of objects, with the levels of the tree determined by a list of keys. For example, my collection could consist of items like [{a_id: '1', a_name: '1-name', b_id ...

javascriptarraystypescripttreelodash

Exploring the world of logging in Nestjs to capture response data objects

I'm eager to implement logging for incoming requests and outgoing responses in NestJs. I gathered insights from various sources including a post on StackOverflow and a document on NestJs Aspect Interception. I'd love to achieve this without rely ...

javascripttypescriptexpressnestjs

The function get() in p5.js will provide you with an array of pixels that is empty

I am currently working on a project that is inspired by this particular video. Within p5.js, I have been utilizing the get() function. My goal is to divide a large tileset into smaller images and store them in an array. However, I have encountered an issue ...

javascriptimagep5.js

Explore the possibilities of integrating react-native-fs into your create-react-native-app project built on Expo

I have been working on implementing react-native-fs into my app for file uploading purposes. I carefully followed the installation steps mentioned in the documentation, imported the required modules, and added the following code snippet for testing: compo ...

javascriptandroidiosreact-nativereact-native-fs

JavaScript appendChild method not functioning properly with dynamically created image elements in JavaScript code

I recently encountered an issue while working on a website project. I was trying to create an img element using JavaScript, but ran into a problem when I tried to add the src attribute and then use the appendChild function. I'm unsure if I am missing ...

javascriptnode.js

Get started with adding a Typescript callback function to the Facebook Login Button

I am in the process of implementing Facebook login into my Angular7 application using Typescript. Although I have successfully integrated Facebook's Login Button plugin for logging in, I am facing issues with providing a callback method to the button& ...

javascriptangulartypescriptfacebook-javascript-sdk

php generate a new file within a specific folder

In the following code snippet, a check is performed for the existence of a directory named 'dat'. If the directory does not exist, it is created. This functionality works correctly; however, the goal is to write a file to this directory that can ...

javascriptphpajax

Guide on generating a dynamic table by looping through an array and placing values inside <tr> tags, then saving it in a variable

I am working with an array object and need to dynamically create a table where each tablerow (tr) pulls values from the array object. After creating the table, I want to store it in a variable so that I can pass it to a rest call, triggering an email with ...

javascriptjqueryhtmlajaxnode.js

I encountered an issue while working with Material-UI and Mobx. The error message reads: "Material-UI: capitalize(string) function requires a string argument

enter code hereI encountered this issue when I copied a React component from and the state of this component is managed by Mobx as shown below: @observable snackbarState = { open: false, vertical: null, horizontal: null, }; @action toggle ...

javascriptreactjsmaterial-uimobxmobx-react