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;