NuxtJS cant load multiple CSS sheets with variables

Question

I am attempting to build a blog using NuxtJS. My repo is here. I listed my problem as an issue on the Nuxt repo as well here.

Essentially the problem is this. In my config file I load in my style sheets.

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

The problem seems to be that variables defined in one sheet can not be accessed by another. The variables defined in vars.css to not exist for global or ui.css

But what's even more strange but probably should be ignored, for now, it seems like just box-shadow seems to actually work. Every other variable doesn't.

As a temporary fix, you can consider using scss or less. Nuxt build them automatically, and you get extra functionalities. — FitzFish
– FitzFish, Commented Nov 18, 2017 at 23:42

Bhojendra Rauniyar · Accepted Answer · 2017-11-18 18:01:29Z

1

It should be either ~/ or ./ but not ~./. This will fix your issue:

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

'./' says to go to the root folder and after that find /css/...

While ~/ denotes to the home directory.

See the following posts for more detail:

What does mean a tilde key in a file path

Link a .css on another folder

edited Nov 18, 2017 at 18:01

answered Nov 18, 2017 at 17:51

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyle.Tryon Over a year ago

Thanks! Great resources too. Fixed that issue but unfortunately, it seems the same issue exists. Here's the errors. You can see everything loaded after the Var sheet, which all use variables from that sheet, have no values. pastebin.com/W6XhM7hR Updated the github as well.

Bhojendra Rauniyar Over a year ago

CSS link is fixed but variable are not fixed... seems problem with the variables... sorry i don't know nuxt.js as of now.

Collectives™ on Stack Overflow

NuxtJS cant load multiple CSS sheets with variables

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related