vue.js - Vue CLI plugin CSS preprocessor (sass) transpile in parent

Question

We have a pretty standard Vue CLI environment. It currently ingests a vue plugin we created via the install method. The plugin is also a Vue CLI environment and lives as a git submodule in the repo.

Currently the parent uses sass and sass-loader packages to transpile. It's configured in the vue.config.js settings, like so:

module.exports = {
  // Other properties and settings removed to simplify
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/styles/global.scss";
        `
      }
    }
  }

The gloabl.scss just houses all our style includes.

The plugin is set up in a similar way, but none of the code is getting ingested into the parent. Which totally makes sense, as there is nothing importing/building the plugins style files. Anyone know how to import and transpile plugin sass style sheets? Thank you!

Answer 1

If your plugin is a node module, you can try to configure Vue CLI to transpile that plugin, which it doesn't do by default. In your vue.config.js:

vue.config.js

module.exports = {
  transpileDependencies: [
    'module-name'           // Change to the name of your module
  ]
}

Relevant link: Vue CLI transpileDependencies docs