Subscribe on changes!

After vite introduces the scss file globally, it does not take effect because of scoped

avatar
shaobeichen
Jul 6th 2022

Vue version

3.2.37

Link to minimal reproduction

https://github.com/shaobeichen/blog

Steps to reproduce

After downloading the project run

yarn
yarn dev

What is expected?

The global scss file is not imported repeatedly and takes effect

What is actually happening?

image image image Repeatedly importing scss files with scoped attribute causes the global style to not take effect. I've been looking for a long time and can't find out why.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
    Memory: 7.26 GB / 15.79 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.36)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^3.2.37 => 3.2.37

Any additional comments?

No response

avatar
LinusBorg
Jul 6th 2022

You're injecting this SCSS file into each and every scss file and <style> block. that additionalData option should only be used to inject scss variables, mixins etc. - so SCSS code that disappears during compilation.

Injecting actual CSS like this will lead to duplication, and will lead to the CSS being scoped - because you injected it also into your scoped style blocks

avatar
shaobeichen
Jul 11th 2022

The correct solution is: you need to split the files that don't contain scss variables and the files that contain scss variables, and introduce the files that contain scss variables in additionalData, so that they won't be introduced repeatedly and the scss variables can be used in each component.

avatar
naaadz
Jul 18th 2023

The correct solution is: you need to split the files that don't contain scss variables and the files that contain scss variables, and introduce the files that contain scss variables in additionalData, so that they won't be introduced repeatedly and the scss variables can be used in each component.

Where do you put the rest of the scss files that don't contain the vars, to be used globally?

Edit: I think i got it. For nuxt that is in the nuxt config i did it like:

 css: ['@/assets/styles/vars-and-global-styles.scss'],
 vite: {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/assets/styles/only-variables.scss";
            },
        },
    },
GitHub Track