How do I include a SCSS file in my Nuxt module?

How do I include a SCSS file in my Nuxt module please?

When developing locally, the below works as intended. However, when I package and install the module in a site, it complains that it can't find

node_modules/foo/dist/runtime/main.scss

node_modules/foo/dist/runtime/main.scss

.

It looks like I need to either change the resolver to point at

src/runtime/main.scss

src/runtime/main.scss

, or

dist/runtime/main.css

dist/runtime/main.css

when packaged, but I don't know how to achieve that.

import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  createResolver
} from "@nuxt/kit";

export default defineNuxtModule( {
  meta: {
    name: "foo",
    version: "1.0",
    configKey: "foo"
  },
  setup ( _, nuxt ) {
    const { resolve } = createResolver( import.meta.url );

    const runtimeDir = fileURLToPath( new URL( "./runtime", import.meta.url ) );
    nuxt.options.css.unshift(
      resolve( runtimeDir, "./main.scss" )
    );
  }
} );

import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  createResolver
} from "@nuxt/kit";

export default defineNuxtModule( {
  meta: {
    name: "foo",
    version: "1.0",
    configKey: "foo"
  },
  setup ( _, nuxt ) {
    const { resolve } = createResolver( import.meta.url );

    const runtimeDir = fileURLToPath( new URL( "./runtime", import.meta.url ) );
    nuxt.options.css.unshift(
      resolve( runtimeDir, "./main.scss" )
    );
  }
} );

Thanks

Nuxt•3y ago•

2 replies

Dan H

How do I include a SCSS file in my Nuxt module?

How do I include a SCSS file in my Nuxt module please?

When developing locally, the below works as intended. However, when I package and install the module in a site, it complains that it can't find

node_modules/foo/dist/runtime/main.scss

node_modules/foo/dist/runtime/main.scss

.

It looks like I need to either change the resolver to point at

src/runtime/main.scss

src/runtime/main.scss

, or

dist/runtime/main.css

dist/runtime/main.css

when packaged, but I don't know how to achieve that.

import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  createResolver
} from "@nuxt/kit";

export default defineNuxtModule( {
  meta: {
    name: "foo",
    version: "1.0",
    configKey: "foo"
  },
  setup ( _, nuxt ) {
    const { resolve } = createResolver( import.meta.url );

    const runtimeDir = fileURLToPath( new URL( "./runtime", import.meta.url ) );
    nuxt.options.css.unshift(
      resolve( runtimeDir, "./main.scss" )
    );
  }
} );

import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  createResolver
} from "@nuxt/kit";

export default defineNuxtModule( {
  meta: {
    name: "foo",
    version: "1.0",
    configKey: "foo"
  },
  setup ( _, nuxt ) {
    const { resolve } = createResolver( import.meta.url );

    const runtimeDir = fileURLToPath( new URL( "./runtime", import.meta.url ) );
    nuxt.options.css.unshift(
      resolve( runtimeDir, "./main.scss" )
    );
  }
} );

Thanks

How do I include a SCSS file in my Nuxt module?

Similar Threads

How do I include a SCSS file in my Nuxt module?

Similar Threads

Similar Threads

Similar Threads