Nuxt.js: Have PostCSS take into account global CSS

[justintaddei]

What problem does this feature solve?

Using CSS custom properties could be great, but right now it's a pain.

Consider this:

You include your global css in nuxt.config.js

module.exports = {
    // ...
    css: ['~/assets/css/global.css`]
}

global.css looks like this:

:root {
    --red: #f00;
}

Then in Home.vue you do this:

<template>
    <div>
        <h1>Home</h1>
    </div>
</template>

<style scoped>
    h1 {
        color: var(--red);
    }
</style>

When this is compiled the CSS output for Home.vue is this:

h1 {
    color: var(--red);
}

Had the global CSS been taken into consideration the output would've been this:

h1 {
    color: #f00;
    color: var(--red);
}

What does the proposed changes look like?

This would appear the same on the surface, only altering the compiled CSS output.

_{This feature request is available on Nuxt community (#c9879)}

[alanaasmaa]

Take a look of this module: https://github.com/nuxt-community/style-resources-module

[justintaddei]

Thank you! That looks like it'll do the trick. I don't know how I didn't come across that before.

---

From: Alan Aasmaa [e-mail]
Sent: Wednesday, October 9, 2019 4:37:25 AM
To: nuxt/nuxt.js [e-mail]
Cc: Justin Taddei [e-mail]; Author [e-mail]
Subject: Re: [nuxt/nuxt.js] Have PostCSS take into account global CSS (#6534)

Take a look of this module: https://github.com/nuxt-community/style-resources-modulehttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnuxt-community%2Fstyle-resources-module&data=02%7C01%7C%7Ce0f4ccdaa36548f844f308d74c9c4b4b%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637062106461644415&sdata=BKaP5ThS04xWHi%2FEcePvgLYE1GChvtf4iKgM1rKbPOw%3D&reserved=0

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnuxt%2Fnuxt.js%2Fissues%2F6534%3Femail_source%3Dnotifications%26email_token%3DAD7OQOQWTHIZI4PNIFK3S43QNWQ5LA5CNFSM4I6XZ3AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAXJCKA%23issuecomment-539922728&data=02%7C01%7C%7Ce0f4ccdaa36548f844f308d74c9c4b4b%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637062106461654424&sdata=X1m59w8jxYvBIyY%2B7E9Z81R22z%2FM5u%2BCzajHnz7VPuA%3D&reserved=0, or mute the threadhttps://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAD7OQOT5UPXKMA3MDDG2TSDQNWQ5LANCNFSM4I6XZ3AA&data=02%7C01%7C%7Ce0f4ccdaa36548f844f308d74c9c4b4b%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637062106461654424&sdata=QQIbLvVFYU2%2FRf1xr5jkUAzdIm2KnsARm6DUvOMGo%2BY%3D&reserved=0.

[nathanchase]

@justintaddei are you using postcss-preset-env? I have global css variables in my nuxt.config.js and it works just fine...

Just make sure it's included in your postcss block in nuxt.config.js like so:

build: {
  ...
  postcss: {
    plugins: [
      postcssPresetEnv({
        stage: 0
      })
    ]
  },
  ...
}