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 ?

I see that you are using `storybook-builder-vite` in this example. Note that the package has been renamed to `@storybook/builder-vite`, so if you haven't already updated, you should do so when you have a chance. — IanVS, May 04 '22 at 04:03
It is already done. The package was correct at the time I wrote this question. — Lyokolux, May 04 '22 at 12:56

score 12 · Accepted Answer · answered Feb 19 '22 at 21:45

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

Same issue, same method solved it. "sass":"1.53.0" and "vue":"3.2.25" — Riza Khan, Jun 26 '22 at 01:42

score 7 · Answer 2 · answered May 01 '22 at 00:18

7

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

answered May 01 '22 at 00:18

DrunkenBeetle

267
4
2

I maybe add a little addition this comment via vite's docs: https://vitejs.dev/guide/features.html#import-inlining-and-rebasing – Halil Kayer Jul 11 '22 at 20:16
1

I also would like to mention my personal experience. Unless your style file somehow not `@import`ed by your component or other style files, vite won't process it. And `@import` keyword, at-rule, directive (whatever your preprocessor call it) is the important to use, For instance, I am using SCSS and try `@use` instead of `@import` and it won't work. I mean vite does not pick up my SCSS file where it's included via `@use` another SCSS file. – Halil Kayer Jul 11 '22 at 20:20
I had the same issue with `@use` as Halil. The issue was I forgot the `as *`. This solved my problem: `@use "./styles/global" as *;` – MathiasCiarlo Mar 24 '23 at 07:03

score 1 · Answer 3 · answered Aug 04 '22 at 22:30

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

score 1 · Answer 4 · answered Mar 13 '23 at 12:26

For me where I needed my npm modules to be available in sass files for @import 'my-npm-module/sass/file' what worked was adding this in vite.config.ts

css: {
   preprocessorOptions: {
     scss: {
       includePaths: ['node_modules']
     }
   }
 },

Then in my scss file I could use imported sass files

Stack: "vite": "^3.2.0", "lit": "^2.3.1",

Scss not loaded with Vite

4 Answers4