Настройка темы Vuetify не работает с Laravel Mix - PullRequest
Новая
       47

Настройка темы Vuetify не работает с Laravel Mix

0 голосов
/ 04 февраля 2019

Я создаю интерфейс API в VueJS вместе с Vuetify в пакете Laravel.Согласно документам Vuetify, я создал файл main.styl, содержащий основной файл стилуса темы (~vuetify/src/stylus/theme), мои переопределения и включение файла приложения (~vuetify/src/stylus/main.styl) в этом порядке.Это должно добавить мои переопределения цвета, однако этого не происходит.

Файл стилуса выглядит следующим образом: 

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import "~vuetify/src/stylus/theme"

$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a

@import '~vuetify/src/stylus/main'

И мой webpack.mix.js выглядит так: 

const path = require('path')
const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

mix.setPublicPath(path.normalize('public'))

mix.webpackConfig({
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: 'vendor/my-package-name/'
  },
  plugins: [
    new VuetifyLoaderPlugin()
  ],
  resolve: { ... }
})

mix.stylus('resources/stylus/vuetify.styl', 'public/css')
mix.js('resources/js/app.js', 'public/js/app.js')

Я попытался установить (в примере набораto) $material-theme переменная в $material-dark и $theme, а также ни одна не работает ...

Я удостоверился, что установил весь плагин пера и все такое, и пряжа не жалуется навсе при компиляции таблицы стилей (и это происходит, если я намеренно вызываю ошибку).Однако скомпилированная таблица стилей не содержит мои измененные переменные темы.Тем не менее, мои настройки не применяются вообще.Файл CSS не содержит мои пользовательские цветовые коды и тому подобное.

Кто-нибудь знает, почему это не работает должным образом?

1 Ответ

0 голосов
/ 13 июля 2019

Я также использую Laravel, vue и vuetify Framework, и весь процесс переопределения переменных vuetify по умолчанию довольно прост, если вы понимаете настройку, на самом деле вы, кажется, только усложняете ее многими ненужными настройками.Я скорее использую npm, а не пряжу, но это не должно иметь значения.Итак, я бы предпочел сделать это: main.styl файл, похожий на: 

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

$material-theme.primary = #0078ff
$material-theme.secondary = #00437b
$material-theme.accent = #ee202e
$material-theme.background = #1a1a1a
$material-theme.bg-color = #1a1a1a
$material-theme.cards = #1a1a1a
$material-theme.picker.body = #1a1a1a

@import "~vuetify/src/stylus/theme"    
@import '~vuetify/src/stylus/main'

И это мое собственное webpack.min.js, не знаю, почему у вас избыточный конфиг! 

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

Чтобы Vuetify не писал встроенные стили, которые могли бы переопределить ваш main.css, выполните: 

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

Итак, что изменилось?

  1. Вы сказали, что создали файл main.style, ноиз вашего webpack.mix.js вы компилируете файл vuetify.styl в свой css.
  2. Ваш файл main.styl должен быть сохранен по пути resources/stylus/main.styl

Примечание: вынужно настроить стилус-загрузчик, так как Vuetify построен поверх стилуса.Если вы не в командной строке запустите: 

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

Также обратите внимание: значения по умолчанию для переменных стилуса, которые вы хотите изменить, должны быть объявлены до импорта. Не прошел список переменных,должно быть все в порядке, но подтвердите с этой страницы GitHub https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl

должно быть хорошо, я считаю

...