Emi*_*lie 7 sass webpack vuetify.js webpack-encore
我有 Vuetify 2.2.11，我试图覆盖他们的 SASS 变量。我在 Symfony 3.x 项目中，所以我没有使用 vue-cli 安装 Vuetify。我遵循了Webpack 安装指南，但似乎无法使其正常工作。Vuetify 样式被转储到一个 css 文件（以我的 js: app.js->命名app.css），但不考虑我的覆盖。至于我的项目样式 ( company.scss)，它们被注入<style type="text/css">到 html的标签中。还有一大堆空<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;
好吧，我终于开始工作了。具体方法如下：
webpack.config.js:您在这里所需要做的就是.enableSassLoader(). 此处描述的配置选项实际加载但变量声明无效。
app.js只需包含您的样式即可：
import '../styles/company.scss';
variables.scss我创建了这个文件并将所有 vuetify 特定变量移到了那里。你可以使用官方的例子。
company.scss这就是窍门：
@import './assets/css/variables.scss';
@import '~vuetify/src/styles/main.sass'; // include this after your variables
就是这样。
我注意到热重载不适用于变量的更改。但只要这些变量起作用就可以了。我从这个页面得到了关于颜色包的提示
| 归档时间： |
|
| 查看次数： |
2459 次 |
| 最近记录： |