Scss not loaded with Vite

Question

The build with Vite and Vue works like a charm (so ist the path correct). However, it does not with storybook.

Here my config:

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: { 
         additionalData: `@import "./src/css/global.scss";` 
     },
    },
  },
})

.storybook/main.js:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "storybook-builder-vite"
  }
}

I am using storybook-builder-vite as vite is used to build the project too.

package.json

"devDependencies": {
    "@storybook/addon-actions": "^6.4.18",
    "@storybook/addon-essentials": "^6.4.18",
    "@storybook/addon-links": "^6.4.18",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue3": "^6.4.18",
    "sass": "^1.49.7",
    "sass-loader": "^12.4.0",
    "storybook-builder-vite": "^0.1.15",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-i18n": "^8.27.0",
    "vue-loader": "^16.8.3",
    "vue-tsc": "^0.29.8"
}

Any ideas ?

Answer 1

I have had exactly the same problem. Although many vite vue 3 boilerplates do it the same way you and I do, strangely it didn't work, maybe it's a certain vite version that might have bugs.

The only thing that worked for me was the import in main.ts:

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

//import your scss here
import "@/assets/scss/style.scss";

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

My versions:

sass: 1.49.8 (you only need the sass package here and not the loader)

vue: 3.2.29