Vite does not build my @extend rules from bulma-scss

Question

I'm having a build issue with the scss at-rule "extend" using Vite to build out a Vue3 component library using the bulma-scss NPM package.

Using Bluma buttons for example, I would like to import the bulma-scss button.scss file into my tag in my .vue file (or into the button.scss file and then import that into the script tag) like so:

<template/>
<script/>
...
<style lang="scss">
@import 'bulma-scss/elements/button';
</style>

When running $ vite build I get this error from Vite:

File: /Users/my-user/sites/component-library/node_modules/bulma-scss/elements/_button.scss
Error: The target selector was not found.
Use "@extend %control !optional" to avoid this error.

It is specifically this line in the bulma-scss package that it doesn't like (in this example) https://github.com/j1mc/bulma-scss/blob/master/elements/_button.scss#L71

it looks like I can get around this by adding the following preprocessor option to my storybook's vite configs:

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "bulma-scss";`
      }
    },
  },

But that would include the entirety of bulma-scss right? Ideally I would only import the things I need from bulma.

And here is my entire vite config file (sans the css preprocessorOptions)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.js'),
      name: 'lmsComponentLibrary',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  resolve: {
    alias: {
        'bulma-scss/': require('path').join(__dirname, 'node_modules/bulma-scss/'),
    }
  },
});

Answer 1

I think the problem comes from the bulma-scss package itself. In the file that you are importing there is no %control placeholder. Even its import ../utilities/controls and ../utilities/mixins don't have that placeholder neither. So the error is expected here.

The %control is defined in bulma-scss/utilities/extends so you can fix the problem by importing that file. BUT, it will lead to another problem because in the _extends.scss there are some variables that are not defined. So you need to import all the file that contains these variables.

Luckily, the package has a file containing all the utility variables. So you just need to import it.

@import 'bulma-scss/utilities/all'; <-- Add this line
@import 'bulma-scss/elements/button';