Scss not loaded with Vite

user_11732874 0
Viewed 5582

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 ?

vite storybook vuejs3
3 Answers

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

user_111378560

The preprocessorOptions.*.additionalData parameter will only work if there are already loaded/imported css to prepend to, so basically using both options of importing directly into your main.ts file for the bulk and any other preprocessing can be defined in the vite.config.js file.

Th documentation at https://vitejs.dev/config/#css-preprocessoroptions unfortunately does NOT explain this, which did tarnish a perfectly good Saturday night

user_16936100

Here's what worked for me:

If you haven't, install the Storybook builder for Vite (@storybook/builder-vite)

npm install @storybook/builder-vite --save-dev

or

yarn add --dev @storybook/builder-vite

Then in the .storybook/main.js file,

const { mergeConfig } = require('vite');

module.exports = {
  async viteFinal(config, { configType }) {
    // return the customized config
    return mergeConfig(config, {
      css: {
        preprocessorOptions: {
          scss: {
            // Next line will prepend the import in all you scss files as you did with your vite.config.js file
            additionalData: `@import "./src/styles/main";`,
          },
        },
      },
    });
  },
  // ... other options here
};

It is almost the same thing as you did, the trick here, is to add the same css.preprocessorOptions.scss object to the storybook configuration via mergeConfig in the main.js file in storybook.

Based on the @storybook/builder-vite documentation

user_84070620
Related