Q&A
前提・実現したいこと
LaravelでVueを使用していて、今回はそのVueにVuetifyの導入を試みています。
Vuetify自体の表示にも戸惑っていたのですが、なんとか表示できるようになりました。
過去の質問
デフォルトに設定されているMaterial Iconsを使用したいです。
また、使用方法はCDNではなくローカルでの使用を希望します。
発生している問題
ドキュメントに沿って
$ yarn add material-design-icons-iconfont -D
を実行
import 'material-design-icons-iconfont/dist/material-design-icons.css'
を追加しましたが、表示されるのは文字列でアイコンは表示されません。
###エラーコード
GET http://localhost/fonts/vendor/material-design-icons-icondist/MaterialIcons-Regular.woff?9219a80f0478e0bfdee5f4c753ce8535 net::ERR_ABORTED 404 (Not Found)
該当のソースコード
package.json
JSON
1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "watch": "npm run development -- --watch", 7 "watch-poll": "npm run watch -- --watch-poll", 8 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 9 "prod": "npm run production", 10 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 }, 12 "devDependencies": { 13 "axios": "^0.18", 14 "bootstrap": "^4.0.0", 15 "cross-env": "^5.1", 16 "@fortawesome/fontawesome-free": "^5.7.2", 17 "@mdi/font": "^3.5.95", 18 "material-design-icons-iconfont": "^4.0.5", 19 "jquery": "^3.2", 20 "laravel-mix": "^4.0.7", 21 "lodash": "^4.17.5", 22 "popper.js": "^1.12", 23 "resolve-url-loader": "^2.3.1", 24 "sass": "^1.15.2", 25 "sass-loader": "7.*", 26 "url-loader": "^1.1.2", 27 "vue": "^2.5.17", 28 "vue-template-compiler": "^2.5.21" 29 }, 30 "dependencies": { 31 "eslint": "^5.12.1", 32 "stylus": "^0.54.5", 33 "stylus-loader": "^3.0.2", 34 "switch-php": "^1.1.3", 35 "vee-validate": "^2.1.5", 36 "vue-router": "^3.0.2", 37 "vuetify": "1.3.16" 38 } 39}
app.js
require('./bootstrap'); import Vue from 'vue' //以下、VeeValidateの導入 import VeeValidate, { Validator } from 'vee-validate'; Vue.use(VeeValidate); import VeeValidateJaLocale from 'vee-validate/dist/locale/ja' Validator.localize('ja',VeeValidateJaLocale); //以下、Vuetifyの導入 import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import 'vuetify/src/stylus/app.styl' //以下、Vuetifyのicon import '@mdi/font/css/materialdesignicons.css'//mdi import 'material-design-icons-iconfont/dist/material-design-icons.css'//md Vue.use(Vuetify,{ iconfont:'md'||'mdi' }); import router from './router.js' import UserRoot from './UserRoot' Vue.component('admin-root', require('./AdminRoot').default); Vue.component('user-root', require('./UserRoot').default); const admin_top = new Vue({ el: '#admin-top', router, }); const user_top = new Vue({ el: '#user-top', router, render:h=>h(UserRoot) });
ドキュメントのselectを流用してサンプルを作成しました
このコンポーネントを呼び出す側で<v-app>でのラッピングはしています
vue
1<template> 2 <v-container fluid grid-list-xl> 3 <v-layout wrap align-center> 4 5 <v-flex xs12 sm6 d-flex> 6 <v-select 7 :items="items" 8 label="Standard" 9 > 10 <v-icon>arrow_drop_down</v-icon> 11 </v-select> 12 </v-flex> 13 </v-layout> 14 </v-container> 15</template> 16 17<script> 18 export default { 19 name: "TestSelect", 20 data() { 21 return { 22 items: ['Foo', 'Bar', 'Fizz', 'Buzz'] 23 } 24 }, 25 } 26</script> 27 28<style scoped> 29 30</style>
試したこと
上記のapp.js内にある通り、他のicon(@mdi)も使用してみましたが、アイコンは表示されません。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。