N
Nuxt•2y ago
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. It looks like I need to either change the resolver to point at src/runtime/main.scss, or 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
2 Replies
Dan H
Dan HOP•2y ago
Did anyone have any thoughts on this?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View

Did you find this page helpful?