Невозможно переопределить переменные Vuetify 2.1 SASS - PullRequest
Новая
       48

Невозможно переопределить переменные Vuetify 2.1 SASS

0 голосов
/ 16 октября 2019

Я работал над этой проблемой часами и не могу найти решение. Я просмотрел несколько других сообщений StackOverflow, которые кажутся связанными (а также Vuetify docs ), но, похоже, у меня ничего не работает. Для начала я просто пытаюсь изменить семейство шрифтов со стандартного Roboto на Avenir. Я не получаю никаких ошибок консоли или ошибок сервера.

@/styles/variables.scss

@import "~vuetify/src/styles/styles.sass";
$font-size-root: 14px;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $main-font comes from my own ./_variables.scss.
$heading-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $title-font comes from my own ./_variables.scss.

@/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light: {
        primary: '#4A90E2',
        darkPrimary: '#3B73B4',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#a70000',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        teal: '#64EBC6',
        green: '#7ED321',
        darkGreen: '#4c8f1d',
        lightGrey: 'rgba(0,0,0,0.12)',
        darkGrey: '#4A4A4A',
        textSecondary: 'rgba(0,0,0,0.4)',
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

@/vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],
  configureWebpack: {
    resolve: {
      // alias: {
      //   '~': path.resolve(__dirname, '../frontend/src'),
      // },
      extensions: ['*', '.js', '.vue', '.json'],
    },
  },
  // css: {
  //   loaderOptions: {
  //     scss: {
  //       prependData: '@import "@/styles/main.scss;"',
  //     },
  //   },
  // },
  // chainWebpack: config => {
  //   ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(match => {
  //     config.module.rule('scss').oneOf(match).use('sass-loader')
  //       .tap(opt => Object.assign(opt, { data: `@import '@/styles/main.scss'; ` }));
  //   });
  // },
};

Любая помощь будет оценена!

1 Ответ

1 голос
/ 16 октября 2019

Итак, через 6 минут после того, как я отправил этот вопрос, я закомментировал строку import 'vuetify/dist/vuetify.min.css в плагине vuetify, и, похоже, правильно использовал шрифт Avenir, который я искал. Довольно классическая. Надеюсь, это поможет кому-то еще!

...