Adding css programatically via a module

I would like to add a couple lines of css via my module. What is the best approach here?

I thought I could do something like:

nuxt.options.css.push('.nuxt/assets/styles.css');
addTemplate({
  filename: "assets/styles.css",
  write: true,
  getContents: () => {
    return `.maplibregl-map {
       --ml-font-icons: maplibregl-icons-lucide;
    }`;
 }
});

nuxt.options.css.push('.nuxt/assets/styles.css');
addTemplate({
  filename: "assets/styles.css",
  write: true,
  getContents: () => {
    return `.maplibregl-map {
       --ml-font-icons: maplibregl-icons-lucide;
    }`;
 }
});

But that is failing with this when I run tests:

Invalid module ".nuxt/assets/styles.css" is not a valid package name imported fro...

Invalid module ".nuxt/assets/styles.css" is not a valid package name imported fro...

Nuxt•10mo ago•

5 replies

dmarr

Adding css programatically via a module

I would like to add a couple lines of css via my module. What is the best approach here?

I thought I could do something like:

nuxt.options.css.push('.nuxt/assets/styles.css');
addTemplate({
  filename: "assets/styles.css",
  write: true,
  getContents: () => {
    return `.maplibregl-map {
       --ml-font-icons: maplibregl-icons-lucide;
    }`;
 }
});

nuxt.options.css.push('.nuxt/assets/styles.css');
addTemplate({
  filename: "assets/styles.css",
  write: true,
  getContents: () => {
    return `.maplibregl-map {
       --ml-font-icons: maplibregl-icons-lucide;
    }`;
 }
});

But that is failing with this when I run tests:

Invalid module ".nuxt/assets/styles.css" is not a valid package name imported fro...

Invalid module ".nuxt/assets/styles.css" is not a valid package name imported fro...

Adding css programatically via a module

Similar Threads

Adding css programatically via a module

Similar Threads

Similar Threads

Similar Threads