【发布时间】：2020-02-14 15:03:45
【问题描述】：
我有 Vuetify 2.2.11，我正在尝试覆盖他们的 SASS 变量。我在一个 Symfony 3.x 项目中，所以我没有使用 vue-cli 安装 Vuetify。我关注了Webpack install guide，但我似乎无法让它发挥作用。 Vuetify 样式被转储到一个 css 文件（以我的 js 命名：app.js -> app.css），但我的覆盖没有考虑在内。至于我的项目样式（company.scss），它们被注入到 html 中的 <style type="text/css"> 标记中。还有一大堆空的 <style type="text/css"></style> 标签，我猜它们来自每个 Vuetify 组件，但我不知道为什么它们是空的。
这是我的代码的样子：
// /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;
【问题讨论】：
-
嗨，Emilie，您找到解决方案了吗？
-
@ferdynator 不，我放弃了这个:(
标签： webpack sass vuetify.js webpack-encore