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

2 messages · Page 1 of 1 (latest)

half osprey
#

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" )
    );
  }
} );

Thanks

half osprey
#

Did anyone have any thoughts on this?