Global SCSS Imports

[jkwill87]

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/core#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.

[pecopeco]

It's useful

[BellemareMederic]

Question if i want to prepend my mixin globaly and refer to it in my components Style tags. how i can do that ?
i try to add in vite.config.js

vite.config.js

module.exports = { css: { loaderOptions: { sass: { additionalData: ` @import "@/style/index.scss"; ` } } } };

result

but when i try to @include my mixin in my App.vue i get this error
[vite] SFC style compilation error: \src\App.vue:32:5 Undefined mixin. ╷ 14 │ ┌ @include respond-to('small'){ 15 │ │ font-size:4rem; 16 │ └ }

my package.json

"devDependencies": { "@vue/compiler-sfc": "^3.0.0", "css-loader": "^4.3.0", "node-sass": "^4.14.1", "sass": "^1.26.11", "sass-loader": "^10.0.2", "vite": "^1.0.0-rc.1" }
=D thanks for the help there :P

[Jack-rainbow]

Question if i want to prepend my mixin globaly and refer to it in my components Style tags. how i can do that ?
i try to add in vite.config.js

vite.config.js

module.exports = { css: { loaderOptions: { sass: { additionalData: ` @import "@/style/index.scss"; ` } } } };

result

but when i try to @include my mixin in my App.vue i get this error
[vite] SFC style compilation error: \src\App.vue:32:5 Undefined mixin. ╷ 14 │ ┌ @include respond-to('small'){ 15 │ │ font-size:4rem; 16 │ └ }

my package.json

"devDependencies": { "@vue/compiler-sfc": "^3.0.0", "css-loader": "^4.3.0", "node-sass": "^4.14.1", "sass": "^1.26.11", "sass-loader": "^10.0.2", "vite": "^1.0.0-rc.1" }
=D thanks for the help there :P

I have also encountered this problem and am looking for a solution, but have not found a useful solution.

[BellemareMederic]

i think is need to be re-open @jkwill87 i dont find any solution to making @import ".scss." in my JS file communicate with my template lang=SCSS.

[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.

[JessicaHuang210]

這個對我有用。

import path from "path";
const pathSrc = path.resolve(__dirname, "./src");
export default {
  // ...
  css: {
    preprocessorOptions: {
      scss: { additionalData: `@import "${pathSrc}/scss/variables";` },
    },
  },
};

[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";` 
     },
    },
  },
};

[no-why]

global stylus imports not work, less and scss works

preprocessorOptions: {
styl: {
additionalData: @import "src/assets/styles/vars.styl";
},
scss: {
additionalData: @import "src/assets/styles/sass.scss";
},
less: {
additionalData: @import "src/assets/styles/less.less";
}
}
}

[pecopeco]

Stylus doesn't work either

[zouhangwithsweet]

Stylus doesn't work either

hi, there is a simple plugin demo for stylus @import

import type { Plugin } from 'vite'
import path from 'path'

export function importStylus(): Plugin {
  return {
    name: 'vite-stylus-import-plugin',
    async transform(code, id) {
      if (/.stylus$/g.test(id)) {
        return {
          code: `
            @import "${path.resolve(__dirname, pathToStylFile)}"

            ${code}
          `,
          map: null,
        }
      }
      return null
    }
  }
} 

use in vite.config.ts

import { importStylus } from './vite-stylus-import-plugin.ts'
//***
plugins: [
   {
      ...importStylus(),
      enforce: 'pre',
    },
]

[qnp]

Greetings,

For the record,

I came across looking deeper into the Vite source code and I have a solution for stylus which works using css.preprocessorOptions.

1. The way Vite retrieves preprocessor option might be misleading (I'll open a dedicated issue for that):
   In https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L545

let opts = (preprocessorOptions && preprocessorOptions[lang]) || {}

will result in: if your stylus file are named .stylus you will have to use:

css: {
  preprocessorOptions: {
    stylus: /* stylus options */
  }
}

otherwise, if you named them .styl, you will need to use:

css: {
  preprocessorOptions: {
    styl: /* stylus options */
  }
}

2. Stylus documentation about its options in JS API is not very clear, but looking at the source code you have these options:
   In https://github.com/stylus/stylus/blob/dev/lib/renderer.js#L35

globals
functions
use
imports
paths
filename
Evaluator

In other words, you can use imports (array of file paths) to import the files you need.

Conclusion (TLDR)

This config works:

css: {
  preprocessorOptions: {
     styl: { // or stylus, depending on the stylus files extension name you use
       imports: [path.resolve(__dirname, <pathToStylFile>],
     }
  }
}

[qnp]

#2851

[mutoe]

@qnp Good job bro! It's working fine for me.

css: {
  preprocessorOptions: {
     stylus: {
       imports: [path.resolve(__dirname, 'src/css/variables.styl'],
     }
  }
}

[coyotte508]

I don't think it's working for sass imports from inside node_modules:

I want to define variables that vuetify can then use, but the variables are only defined in my own stylesheets, not in vuetifty's imports.

For example vuetify's VCard component does:

// Styles
import "../../../src/components/VCard/VCard.sass"; // Extensions

// ...

which imports:

@import './_variables.scss'

// ...

which contains default values:

$card-actions-padding: 8px !default;
$card-adjacent-sibling-text-padding-top: 0 !default;
$card-border-radius: $border-radius-root !default;
$card-btn-margin-x: 8px !default;
$card-btn-padding: 0 8px !default;
// ...

But they aren't overwritten even with additionalData specified

[Niputi]

@coyotte508 if you are on 2.3.2 could you try upgrading to 2.3.3?

[coyotte508]

@coyotte508 if you are on 2.3.2 could you try upgrading to 2.3.3?

I was on 2.3.1, still the same issue after upgrading.

[coyotte508]

@Niputi I created a sample repo to reproduce the issue: https://github.com/coyotte508/vite-vuetify-scss

[Niputi]

@coyotte508 might be a good idea to open a new issue with that reproduction

[cryogenic-ric]

In case you landed here and code discussed above doesn't work, cssPreprocessorOptions has been renamed to preprocessorOptions

https://vitejs.dev/config/#css-modules

updated code:

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/variables";`
      }
    }
  }

[github-actions]

This issue gets locked because it has been closed for more than 14 days.