McKayB
McKayB
PostsComments
NNuxt
Created by McKayB on 1/25/2025 in #❓・help
Access CSS Variables?
@kapa.ai Thanks, the issue was the variables not being defined correctly -- they had commas, but not % symbols, in their definitions.
29 replies
NNuxt
Created by McKayB on 1/25/2025 in #❓・help
Access CSS Variables?
@kapa.ai None of these variables: 
:root {
    --parchment: hsl(44, 40, 81);
    --invertParchment: hsl(231, 42, 6);
    --torquoise: hsl(190, 37, 63);
}
:root {
    --parchment: hsl(44, 40, 81);
    --invertParchment: hsl(231, 42, 6);
    --torquoise: hsl(190, 37, 63);
}
... are working, whether I use them in the same main.css file where they're created, or I try to use them in inline styles. They do, however, show up as being defined in the browser dev tools.
29 replies
NNuxt
Created by McKayB on 1/25/2025 in #❓・help
Access CSS Variables?
@kapa.ai Your first solution doesn't make the cyan var work, it just makes other divs in the project turn red. Your second solution didn't do anything that I could see. Your third solution wiped out the red background and font-size CSS rules' behavior that was working before.
29 replies
NNuxt
Created by McKayB on 1/25/2025 in #❓・help
Access CSS Variables?
@kapa.ai Yeah I made a minimal reproduction of the issue. These are the only files I modified from base Nuxt: nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  css: [
      "~/assets/main.css",
  ],
  devtools: { enabled: true }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  css: [
      "~/assets/main.css",
  ],
  devtools: { enabled: true }
})
~/assets/main.css 
:root {
  --myCyan: hsl(187, 90, 45);
}

body {
  font-size: xx-large;
}
:root {
  --myCyan: hsl(187, 90, 45);
}

body {
  font-size: xx-large;
}
app.vue 
<template>
  <div>
    <NuxtRouteAnnouncer />
    <h1>My Example</h1>
  </div>
</template>

<style scoped>
div {
  background-color: red;
  color: var(--myCyan);
}
</style>
<template>
  <div>
    <NuxtRouteAnnouncer />
    <h1>My Example</h1>
  </div>
</template>

<style scoped>
div {
  background-color: red;
  color: var(--myCyan);
}
</style>
The background-color: red and the font-size rule are being applied fine. The var(--myCyan) is not.
29 replies
NNuxt
Created by McKayB on 1/25/2025 in #❓・help
Access CSS Variables?
@kapa.ai What if I'm already doing your first suggestion and it's not working?
29 replies
NNuxt
Created by McKayB on 1/19/2025 in #❓・help
Submit securely
OK that pretty well answers the question -- follow-up question is for opinions: should I just embrace the Nuxt native way, or should I use the third-party Form Actions extension? Considering I know I've liked Actions better than API endpoints in other frameworks, but also that I'm trying to keep the project sleek and elegant.
7 replies