Sass mixins not loading properly.

[BackendBob]

Summary

Things have been going smoothly right up until I tried replacing some media queries with mixins.
I simply added a partial .scss file with my mixins and tried to use one in a vue component.
That's when I started getting [sass] Undefined mixin. errors.

Any ideas where I'm going wrong?

Additional information

Node v20.11.0
storybook v7.6.12
@storybook/vue3-vite 7.6.12

File structure:

styles/
  partials/
    ...
    _mixins.scss
    ...
  defaults.scss

Import statement in defaults.scss:
@import './partials/_mixins.scss';

// _mixins.scss

@mixin tablet() {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@mixin desktop() {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

// Navigation.vue

<style lang="scss" scoped>
ul {
  display: flex;
  
  @include tablet {
      width: 100%;
    }
}
</style>

 // Dependencies
 
  "devDependencies": {
    "@rollup/plugin-alias": "^5.0.0",
    "@storybook/addon-essentials": "^7.0.7",
    "@storybook/addon-interactions": "^7.0.7",
    "@storybook/addon-links": "^7.0.7",
    "@storybook/addon-styling": "^1.3.2",
    "@storybook/blocks": "^7.0.7",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@storybook/vue3": "^7.0.7",
    "@storybook/vue3-vite": "^7.6.12",
    "@types/node": "^18.16.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vue/test-utils": "^2.4.4",
    "css-loader": "^6.7.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.63.6",
    "sass-loader": "^13.2.2",
    "storybook": "^7.6.12",
    "style-loader": "^3.3.2",
    "typescript": "^5.0.2",
    "vite": "^5.0.12",
    "vite-plugin-css-injected-by-js": "^3.1.0",
    "vite-plugin-dts": "^2.3.0",
    "vitest": "^1.2.2",
    "vue": "^3.2.47",
    "vue-router": "^4.2.2",
    "vue-tsc": "^1.2.0"
  },

// preview.ts

import type { Preview } from '@storybook/vue3'
import '../src/styles/defaults.scss'
import { setup } from '@storybook/vue3'
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [],
})

setup((app) => {
  app.use(router)
})

const preview: Preview = {
  parameters: {
    viewport: {
      viewports: INITIAL_VIEWPORTS,
    },
    layout: 'fullscreen',
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

// main.ts

import type { StorybookConfig } from '@storybook/vue3-vite'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
  '@storybook/addon-links',
  '@storybook/addon-essentials',
  '@storybook/addon-interactions',
  {
    name: '@storybook/addon-styling',
    options: {
      sass: {
        // Require your Sass preprocessor here
        implementation: require('sass'),
      },
    },
  },
],
framework: {
  name: '@storybook/vue3-vite',
  options: {},
},
core: {
  builder: '@storybook/builder-vite',
},
docs: {
  autodocs: 'tag',
},
}
export default config

Create a reproduction

No response

[stuartromanek]

Similar situation .. did you ever get this resolved @BackendBob ?

[BackendBob]

Hey!

I did get this to work eventually, yes.
In my vite.config.ts file I added the following:

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/partials/_mixins.scss";`,
      },
    },
  },
  ...
})

[stuartromanek]

Exactly what I was looking for! thank you!
I feel like this should be called out more explicitly in the SB docs, as its the intended behavior when going out of your way to import pre processed css.

[BackendBob]

Couldn't agree more. Took me longer to find this solution than I care to admit, but glad it helped!