Vuetify: [Bug Report] SCSS variable overrides not working in a Webpack a la carte installation

[simonmoog]

Environment

Vuetify Version: 2.1.5
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.120
OS: Mac OS 10.14.6

Steps to reproduce

• Clone the repo
• Build with npm install && npm run build
• Open index.html in your browser
• Notice the overrides in /src/vuetify/vuetify-settings.scss don't take effect
• Change something in that file
• Rebuild
• Still no effect

Expected Behavior

The SCSS variable overrides should take effect

Actual Behavior

The SCSS variable overrides have no effect

Reproduction Link

https://github.com/simonmoog/vuetify-webpack-debug

[MrJmpl3]

I don't see prepend data of the Sass loader

Remember, you need shared the variable with all files css processed to override the variables.

[KaelWD]

Correct, it isn't as simple as just importing the overrides file like you've done there. The vue-cli plugin does it for you, I don't think we have a section on how to manage it manually.

[simonmoog]

@MrJmpl3 I tried using prependData as follows

options: {
  implementation: require('sass'),
  prependData: '@import "~@/plugins/vuetify.scss";',
  sassOptions: {
    fiber: require('fibers'),
  },
},

But this produces the following error

SassError: semicolons aren't allowed in the indented syntax.
@import "~@/plugins/vuetify.scss";

So then I add indentedSyntax: false to the sassOptions, but that leads to another error

SassError: expected ";".

@KaelWD Given that Vuetify is supposed to support SCSS variables in a Webpack setup, I don't think this can be closed until the issue is resolved.

[MrJmpl3]

@simonmoog You need prependData to two rule, one to sass files (without semicolons) and other to scss files (with semicolons)..

The part "This step is only necessary if you are modifying SASS Variables in a webpack project" means when you use webpack without vue-cli, you need install the dependencies and configure too in comparison with a vue-cli project

[simonmoog]

Thanks @MrJmpl3 I literally just stumbled upon that same solution myself, and it seems to have worked.

I've pushed the fix to my repo. The way I've implemented it probably isn't the best though... Open to suggestions

@KaelWD This seems like something that should be added to the documentation.

[glen-84]

Instead of two module rules, you can use something like this:

prependData: (loaderContext) => {
    if (loaderContext.resourcePath.endsWith(".sass")) {
        return "@import 'src/styles/variables.scss'";
    } else {
        return "@import 'src/styles/variables.scss';";
    }
}

It's still a hack though.

[SeekerOfTrueCode]

Instead of two module rules, you can use something like this:

prependData: (loaderContext) => {
    if (loaderContext.resourcePath.endsWith(".sass")) {
        return "@import 'src/styles/variables.scss'";
    } else {
        return "@import 'src/styles/variables.scss';";
    }
}

It's still a hack though.

Holy .... moly man! You've saved me so much time and finally I understood that when I have two different rules and I prepend data only in the scss's one, then vuetifty's sass files don't get the variables prepended and the solution was to provide your's detection and apply correct import style along with appropriate indent style:

            {
                loader: 'sass-loader',
                options: {
                    implementation: require('sass'),
                    sassOptions: (loaderContext) => {
                        if (loaderContext.resourcePath.endsWith(".sass")) {
                            return {
                                indentedSyntax: true,
                                fiber: require('fibers'), 
                            }
                        } else {
                            return {
                                indentedSyntax: false,
                                fiber: require('fibers'), 
                            }
                        }
                    },
                    prependData: (loaderContext) => {
                        if (loaderContext.resourcePath.endsWith(".sass")) {
                            return "@import '@/app/assets/variables.scss'";
                        } else {
                            return "@import '@/app/assets/variables.scss';";
                        }
                    }
                }
            }