Laravel Mixin, S CSS Игнорируется - PullRequest
Новая
       63

Laravel Mixin, S CSS Игнорируется

0 голосов
/ 15 марта 2020

Ранее я просил помочь заставить Vuetify работать с Laravel. Я задокументировал, где я сейчас нахожусь в посте Reddit. Здесь показано, где сейчас находится моя установка: https://www.reddit.com/r/laravel/comments/fgownh/laravel_70_vuetify_22/fkcqyo8

В самом конце этого поста я пытаюсь добавить предустановленный ралли Vuetify. Я предполагал, что в то время это было успешно, потому что цветовая схема загружена правильно. Оказывается, он просто загрузил объект темы Vuetify, показанный здесь: https://github.com/vuetifyjs/vue-cli-plugins/blob/master/packages/vue-cli-plugin-vuetify-preset-rally/preset/index.js

Я могу воспроизвести это, просто переместив объект темы из этого кода непосредственно в Vuetify, т.е. 

export default new Vuetify({
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#1EB980',
        secondary: '#045D56',
        tertiary: '#FF6859',
        quaternary: '#FFCF44',
        quinary: '#B15DFF',
        senary: '#72DEFF',
      },
    },
  },
})

После нескольких проб и ошибок я окончательно определил, что S CSS не компилируется. Это должно было быть очевидно, поскольку npm run dev сообщал мне, что приложение. Файл css был всего несколько байтов. Однако файл app.s css определенно обрабатывается. Например @import '~vuetify/dist/vuetify.min.css'; работает просто отлично. Как и @import '~@mdi/font/css/materialdesignicons.min.css'; Это очень четко загружает эти ресурсы и увеличивает размер приложения. css до сотен килобайт.

Изначально я пытался следовать указаниям из документации Vuetify, импортируя пресет через vuetify. js, как упоминалось в сообщении Reddit. 

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import { preset } from 'vue-cli-plugin-vuetify-preset-rally/preset'

Vue.use(Vuetify)

export default new Vuetify({
    preset,
    theme: { dark: true },
})

Поэтому я попытался вручную импортировать пресет через app.s css: @import '~vue-cli-plugin-vuetify-preset-rally/preset/overrides', который по-прежнему создает очень маленькое приложение. css без ошибок. Получившийся CSS содержит только текущие включенные мной файлы, в частности значки MD.

Таким образом, все свидетельства, по крайней мере, для моих неопытных глаз, говорят мне, что импорт S CSS молча игнорируется. Я просто что-то упускаю?

пакет. json

"dependencies": {
  "vue-cli-plugin-vuetify": "^2.0.5",
  "vue-router": "^3.1.6",
  "vuetify": "^2.2.15",
  "vuetify-loader": "^1.4.3"
},
"devDependencies": {
  "@mdi/font": "^5.0.45",
  "axios": "^0.19",
  "cross-env": "^7.0",
  "laravel-mix": "^5.0.1",
  "lodash": "^4.17.13",
  "resolve-url-loader": "^3.1.0",
  "sass": "^1.26.2",
  "sass-loader": "^8.0.2",
  "vue": "^2.6.11",
  "vue-cli-plugin-vuetify-preset-rally": "~1.0.3",
  "vue-template-compiler": "^2.6.11"
}
...