Override Vuetify SASS variables with webpack and twig

Question

I have Vuetify 2.2.11 and I'm trying to override their SASS variables. I'm in a Symfony 3.x project so I didn't install Vuetify with the vue-cli. I followed the Webpack install guide but I can't seem to make it work. The Vuetify styles get dumped to a css file (which is named after my js: app.js -> app.css) but my overrides are not taken into account. As for my project styles (company.scss), they are injected in a <style type="text/css"> tag in the html. There is also a huge bunch of empty <style type="text/css"></style> tags, which I guess are coming from every Vuetify component but I don't know why they're empty.

This is what my code looks like:

// /assets/js/app.js

import Vue from 'vue';
import vuetify from './plugins/Vuetify';
import FooComponent from './components/FooComponent;

import '../styles/company.scss';

const vmConfig = {
    el: '#app',
    vuetify,
    components: {
        FooComponent
    },
};

new Vue(vmConfig);

// /assets/js/plugins/Vuetify

import Vue from 'vue';

// We import from "lib" to enable the "a-la-carte" installation.
// But even tough we use vuetify-loader we still need to manually specify VApp because it's used in a twig template and the loader doesn't read it.
import Vuetify, { VApp } from 'vuetify/lib';

Vue.use(Vuetify, {
    components: {
        VApp
    }
});

export default new Vuetify({
    icons: { iconfont: 'md' }
});

/* /assets/styles/variables.scss */

$font-size-root: 30px;
$body-font-family: 'Times New Roman';

@import '~vuetify/src/styles/styles.sass';
/*@import '~vuetify/src/styles/settings/variables'; // I tried this one instead and it didn't work either*/

/* /assets/styles/company.scss */

#foo-component {
    background-color: pink;
}

{# /app/Resources/views/app.html.twig #}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="all" href="{{ asset("build/app.css") }}" />
    </head>
    <body>
        <div id="app">
            <v-app>
                {% block main %}
                    <h1>My page</h1>
                    <foo-component></foo-component>
                {% endblock %}
            </v-app>
        </div>

        {% block footer_js %}
            <script type="text/javascript" src="{{ asset("build/app.js") }}"></script>
        {% endblock %}
    </body>
</html>

// webpack.config.js

const Encore = require('@symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const webpack = require('webpack');
let path = require('path');

Encore    
    .setOutputPath('web/build/')
    .setPublicPath('/build')    
    .addEntry('app', './assets/js/app.js')
    .disableSingleRuntimeChunk()
    .enableVueLoader()
    .addPlugin(new VuetifyLoaderPlugin())
    .enableSassLoader()
    .addAliases({
        'vue$': 'vue/dist/vue.esm.js'
    })
    .configureBabel(null, {
        includeNodeModules: ['debug', 'vuetify'] // to make it work in IE11
    })
    .configureLoaderRule('sass', loaderRule => {
        loaderRule.test = /\.sass$/;
        loaderRule.use = [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    data: "@import '" + path.resolve(__dirname, 'assets/styles/variables.scss') + "'",
                    implementation: require('sass'),
                    fiber: require('fibers'),
                    indentedSyntax: true
                }
            }
        ];
    })
;

let config = Encore.getWebpackConfig();
config.module.rules.push({
    test: /\.scss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                data: "@import '" + path.resolve(__dirname, 'assets/styles/variables.scss') + "';",
                implementation: require('sass'),
                fiber: require('fibers'),
                indentedSyntax: false
            },
        },
    ]
});

module.exports = config;

ferdynator ferdynator · Accepted Answer · 2020-09-21T08:03:54

Okay, I finally got it to work. Here is how:

`webpack.config.js`:

All you need to do here is to .enableSassLoader(). The config options described here where actually loading but variable declaration had no effect.

`app.js`

Just include your styles as such:

import '../styles/company.scss';

`variables.scss`

I've created this file and moved all vuetify specific variables there. You can use the official example.

`company.scss`

This is the trick:

@import './assets/css/variables.scss';
@import '~vuetify/src/styles/main.sass'; // include this after your variables

And thats it.

I've noticed that hot reloading doesn't work with changes to variables. But that's fine as long as these variables work. I got the hint from this page about the color pack

Override Vuetify SASS variables with webpack and twig

2 Answers

webpack.config.js:

app.js

variables.scss

company.scss

`webpack.config.js`:

`app.js`

`variables.scss`

`company.scss`