Vue CLI 5/Storybook JS - including external SCSS in the DEV process but not in the production build

rugbert 0
Viewed 25
  • Vue: ver 2.6
  • Vue cli: ver 5
  • CSS: Bulma SCSS

I am building a component library and I do not want to compile my CSS up with the components, I want to build downstream so I can override things here and there or include new components which would mostly use the same upstream variables.

I also want to preview the components I am building in the Storybook JS interface so I need Storybook to build the SCSS during dev, but that's it.

My current vue.config.js config:

module.exports = defineConfig({
  css: {
    extract: false,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "~@/assets/scss/entry.scss";
        `,
      },
    },
  },
})

So in that config, the "additional data" in the scss loader is loading my SCSS which is, in turn, being built by the build script:

vue-cli-service build --target lib --name my-ui-components ./src/index.ts

So I could remove the "additional data" code, but I would then need to build and load it specifically for Storybook.

Is there a "dev mode" configuration where I can have my scss built separately from the production build process?

vue-cli bulma storybook webpack sass
1 Answers

I do not think this is the correct answer, but I am toggling my "additionalData" rule like so:

loaderOptions: {
  scss: {
    additionalData: process.argv.some((e) => e.indexOf('storybook') >= 0)
      ? '@import "~@/assets/scss/entry.scss";'
      : '',
  },
},

So this is just looking at the current terminal command and seeing if "storybook" appears anywhere. If its in one of the command arguments then we include our additional SCSS in the build process. Otherwise we do not.

rugbert0
Related