Use different CSS files for different parts of the site

[sand nebula]

I'm building a marketing site which has a main CSS theme which is used throughout.

The styles are added to the site using the css config option:

defineNuxtConfig({
  css: [
    Path.resolve(__dirname, './res/assets/styles/index.scss'),
  ]
})

As such, the styles are loaded on every page.

However, I have another part of the website designed to be embedded in a third-party application, where I want to use a completely separate stylesheet.

Is it possible to do this?

Ideas:

• compile separate stylesheets using vite , then apply per route with useHead()
• identify and disable the main link tag using a route event handler
• move the embedded part of the site to a subdomain

The first option seems like the best, but:

• I don't know how to do this in Nuxt's setup
• am I risking FOUC ?

Any help would be appreciated!

[fair fog]

Have you tried to import these CSS files inside the <style> block?

<template>...</template>
<style lang="scss">
@import "./res..."?
</style>

Source https://nuxt.com/docs/getting-started/assets

[sand nebula]

As suspected, those styles are simply bundled into the main css bundle.

[sand nebula]

FWIW in the end I decided to use a subdomain and separate Nuxt app.

It's absolutely the best choice; everything (so far) is simpler from deps, to config to styles.

It should also be a better UX for the consuming application.

Still curious if it could have been done, but also really nice starting out with a new, fresh, simple Nuxt app.

[fair fog]

But when you try to use the useHead composable? 😄
https://nuxt.com/docs/getting-started/seo-meta#types

I mean, if you avoid the bundling step, it should work. Loading the stylesheet on the client side.