Global SCSS Imports

Is your feature request related to a problem? Please describe.

I have a scss file with variables I would like to use throughout my app without importing it in every <style> block.

Describe the solution you’d like

A configuration option in vite.config.js which directly or indirectly would allow users to prepend sass as is possible in vue.config.js using prependData or additionalData depending on your sass-loader version.

Describe alternatives you’ve considered

I noticed that vuejs/vue-next#2126 was cited in reference to closing #520, a similar request, but I’m not sure how that’s applicable to vite given that it doesn’t use webpack and as far as I can tell doesn’t use sass-loader.

Additional context

Another separate but related problem is that @import only seems to be working with relative paths; e.g. with the default project setup@import ./src/whatever.scss works fine but @import /src/whatever.scss does not. Supposing that is in fact the case and something like additionalData where possible to use in vite then relative paths would break for components in nested directories. Implementing #650 to resolve aliases in scss files might work though.

[tandv592082]

It’s working perfectly for me

export default {
  css: {
    preprocessorOptions: {
      scss: { 
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
         additionalData: `@import "./src/path-to-scss-variables";` 
     },
    },
  },
};

[scriptcoded]

This is working fine for me. My config looks like this:

import { SharedConfig } from 'vite'

const config: SharedConfig = {
  cssPreprocessOptions: {
    scss: {
      additionalData: '$primary: red;'
    }
  }
}

export default config

The biggest issue right now is #650, as there is no good way of importing files. For example the following wouldn’t work: additionalData: "@import '../assets/scss/_base';"

I’m using SCSS btw, but the same solution should work for plain CSS or anything else.