使用 webpack 和 twig 覆盖 Vuetify SASS 变量 [英] Override Vuetify SASS variables with webpack and twig
问题描述
我有 Vuetify 2.2.11，我正在尝试覆盖他们的 SASS 变量.我在 Symfony 3.x 项目中，所以我没有使用 vue-cli 安装 Vuetify.我遵循了 Webpack 安装指南，但我似乎无法做到工作.Vuetify 样式被转储到一个 css 文件(以我的 js 命名:app.js -> app.css)但我的覆盖没有被考虑在内.至于我的项目样式(company.scss)，它们被注入到 html 的 <style type="text/css"> 标签中.还有一大堆空的 <style type="text/css"></style> 标签，我猜它们来自每个 Vuetify 组件，但我不知道为什么他们是空的.
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.
这是我的代码的样子:
// /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>
{% 块 footer_js %}<script type="text/javascript" src="{{ asset("build/app.js") }}"></script>{% 结束块 %}
