Cannot get Sass variable overrides to take effect

[franck102]

Hi all,

I am trying to override Bootstrap SaSS variables in a Vue3 project, and despite reading dozens of posts and trying everything I could think of I can't get this to work.

vite build --debug doesn't have anything about sass or scss. Sass is installed:

$ npm list|grep -i sass
├── [email protected]
├── [email protected]

My setup looks like this:

main.js:

import "@/assets/scss/custom.scss"
import "bootstrap/scss/bootstrap.scss";

custom.scss:

$success:   #123456;

The generated index.html has the expected style tags, but 123456 is nowhere to be found and the variable is not overriden.

<style type="text/css" data-vite-dev-id="/Users/franck/Projects/passmate/ep-frontend/ep-admin-app/src/assets/scss/custom.scss"></style>

<style type="text/css" data-vite-dev-id="/Users/franckmangin/Projects/passmate/ep-frontend/ep-admin-app/node_modules/bootstrap/scss/bootstrap.scss">@charset "UTF-8";
/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
...

vite.config.ts:

import {defineConfig, loadEnv} from "vite"
import vue from "@vitejs/plugin-vue"
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
import {dirname, resolve} from "node:path"
import {fileURLToPath, URL} from "url"
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig((configEnv) => {
    const env = loadEnv(configEnv.mode, process.cwd(), "")
    const debug = env.DEBUG === "true"
    return {
        define: {
            __VUE_I18N_FULL_INSTALL__: true,
            __VUE_I18N_LEGACY_API__: false,
            __INTLIFY_PROD_DEVTOOLS__: false
        },
        css: {
            preprocessorOptions: {
                sass: {
                    verbose: true
                }
            }
        },
        envPrefix: "EP_",
        plugins: [
            vue(),
            tsconfigPaths(),
            VueI18nPlugin({
                runtimeOnly: false,
                include: resolve(dirname(fileURLToPath(import.meta.url)), "./locales/**")
            })
        ],
        resolve: {
            alias: {
                "@": fileURLToPath(new URL("./src", import.meta.url))
            },
            preserveSymlinks: true
        },
        server: {
            port: 8081,
            strictPort: true
        },
        build: {
            sourcemap: debug,
            minify: !debug,
            rollupOptions: {
                // input: {
                //     main: resolve(__dirname, 'index.html'),
                //     help: resolve(__dirname, 'help/index.html'),
                // },
                // output: {
                //   manualChunks: (id) => {
                //     if (id.includes(".css")) {
                //       return "style"
                //     } else if (id.includes("vue-cal") || id.includes("bootstrap")) {
                //       return "vendor"
                //     }
                //     // if (id.includes("bootstrap")) {
                //     //   return "bootstrap"
                //     // }
                //   }
                // }
            }
        }
    }
})

What am I missing?
Thanks!
Franck

[franck102]

I really could use some help with this, is there any way to see what vite / sass are doing while compiling? vite --debug doesn't mention anything about running sass; and this bogus configuration doesn't trigger any error - it looks like preprocessorOptions is just ignored?

export default defineConfig((configEnv) => {
    const env = loadEnv(configEnv.mode, process.cwd(), "")
    const debug = env.DEBUG === "true"
    return {
        define: {
            __VUE_I18N_FULL_INSTALL__: true,
            __VUE_I18N_LEGACY_API__: false,
            __INTLIFY_PROD_DEVTOOLS__: false
        },
        css: {
            preprocessorOptions: {
                sass: {
                    additionalData: `@import "@/assets/scss/bogus-filename-that-doesnt-exist";`
                }
            }
        },

[franck102]

Here is the configuration that works - using scss instead of sass as the key:

css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@import "@/assets/scss/custom.scss";`
                }
            }
        },