Переопределите переменные Vuetify SASS с помощью веб-пакета и ветки - PullRequest
Новая
       38

Переопределите переменные Vuetify SASS с помощью веб-пакета и ветки

3 голосов
/ 14 февраля 2020

У меня есть Vuetify 2.2.11, и я пытаюсь переопределить их переменные SASS. Я нахожусь в проекте Symfony 3.x, поэтому я не установил Vuetify с vue -cli. Я следовал руководству по установке 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;
...