質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

2回答

980閲覧

onsenuiを導入したvue + rails環境でwebpackのコンパイルエラー

ys3128

総合スコア21

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2018/09/27 02:15

前提・実現したいこと・エラーメッセージ

onsenuiを導入したvueを開発しようとしています。
ローカルでの動作を確認後、rails + vue の環境をEC2にデプロイしようとしていますが、bin/webpackを実行すると下記のエラーが発生してコンパイルがうまく行きません。

ERROR in ./node_modules/onsenui/css/onsenui.css Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css'
ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css'

上記と同類のfontsの読み込みエラーが大量に発生します。

原因の推測

現状、原因の考察としてはrailsで入れたwebpackの設定を特に触っておらず、css-loader,postcss-loaderの挙動がonsenuiと合っていないのかなと考えています。

また、そもそもwebpackとassets:precompileが干渉しているのかとも思っています。

開発手順とフォルダ構成

開発手順としては
1 rails new --webpackで初期ファイル生成
2 app/javascript/packs配下にvueファイルを作成
3 webpack-dev-serverで開発→動作確認・・・※ここでも上記onsenuiのエラーが出てましたが後述の方法で暫定対処(試したことに記載)
4 ec2にクローン
5 bin/webpackを実行

フォルダ構成・ファイル状況としては下記の通りです。

pwa_app ∟app ∟assets ∟config ∟images ∟javascripts ∟application.js・・・④rails newで生成 ∟manifest.json.erb ∟serviceworker-companion.js ∟serviceworker.js.erb ∟stylesheets ∟application.css・・・⑤rails newで生成 ∟custom.scss・・・全体に関連するスタイルはここに記述 ∟channels ∟controllers ∟helpers ∟javascript ∟packs ∟components・・・vueの単一コンポーネントをまとめてます ∟main.js・・・③ ∟plugins ∟router ∟store ∟stylesheets・・・単一コンポーネント内で使うscssをまとめたフォルダ ∟global.scss・・・下記の2つを読み込む ∟_mixin.scss・・・mixinを記載 ∟_variables.scss・・・変数を記載 ∟jobs ∟mailers ∟models ∟uploaders ∟views ∟layouts ∟application.html.erb・・・① ∟staticpages ∟index.html.erb・・・②

node_modules配下の関連しそうなファイルを抜粋

node_modules ∟@rails ∟webpacker ∟package ∟index.js ∟config.js ∟onsenui ∟css ∟onsenui.css・・・⑥ ∟font_awesome ∟css ∟fonts    ∟各種フォントファイル ∟ionicons ∟css ∟fonts    ∟各種フォントファイル ∟material-design-iconic-font ∟css ∟fonts    ∟各種フォントファイル

関連するソースコード

①application.html.erb

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>PwaApp <%= ENV["VAPID_PUBLIC_KEY"] %></title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 11 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> 12 <link rel="manifest" href="/manifest.json" /> 13 <meta name="apple-mobile-web-app-capable" content="yes"> 14 <script packs="https://yubinbango.github.io/yubinbango-core/yubinbango-core.js" charset="UTF-8"></script> 15 </head> 16 17 <body> 18 <%= yield %> 19 </body> 20</html> 21

②index.html.erb

html

1<div id="app"> 2</div> 3<%= javascript_pack_tag 'main' %> 4<%= stylesheet_pack_tag 'main' %> 5

③main.js

js

1import Vue from 'vue/dist/vue.esm.js'; 2import Vuex from 'vuex'; 3import App from './components/app.vue' 4import store from './store/store.js' 5import VueRouter from 'vue-router'; 6import Router from './router/router.js' 7import "babel-polyfill" 8Vue.use(Vuex); 9Vue.use(VueRouter); 10 11import axios from 'axios' 12import { csrfToken } from 'rails-ujs' 13import AxiosCsrfPlugin from './plugins/axios-csrf' 14 15Vue.use(AxiosCsrfPlugin, { axios: axios, csrfToken: csrfToken}) 16 17import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css' 18import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css' 19import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css' 20import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css' 21 22import 'onsenui/css/onsenui.css';//bin/webpackはここで引っかかっている 23import 'onsenui/css/onsen-css-components.css'; 24import VueOnsen from 'vue-onsenui'; 25Vue.use(VueOnsen); 26 27import VueQrcodeReader from 'vue-qrcode-reader' 28 29Vue.use(VueQrcodeReader) 30 31 32document.addEventListener('DOMContentLoaded', () => { 33 var app = new Vue({ 34 el: '#app', 35 store, 36 router: Router, 37 render: (h) => h(App), 38 }); 39}); 40 41Router.beforeEach((to, from, next) => { 42 if (to.matched.some(record => record.meta.requiresAuth)){ 43 if (false) { 44 next({ 45 path: '/login', 46 query: { redirect: to.fullPath} 47 }) 48 } else { 49 next() 50 } 51 } else { 52 next() 53 } 54}) 55 56if (navigator.serviceWorker) { 57 navigator.serviceWorker.register('/serviceworker.js', { scope: './' }) 58 .then(function(swReg) { 59 console.log('Service Worker is registered', swReg); 60 }) 61 .catch(function(error) { 62 console.error('Service Worker Error', error); 63 }); 64} else { 65 console.warn('Push messaging is not supported'); 66} 67

④application.css

css

1/* 2 * This is a manifest file that'll be compiled into application.css, which will include all the files 3 * listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 6 * vendor/assets/stylesheets directory can be referenced here using a relative path. 7 * 8 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 10 * files in this directory. Styles in this file should be added after the last require_* statement. 11 * It is generally better to create a new file per style scope. 12 * 13 *= require_materialize 14 *= require_tree . 15 *= require_self 16 */ 17

⑤application.js

js

1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require jquery3 14//= require jquery.turbolinks 15//= require rails-ujs 16//= require activestorage 17//= require turbolinks 18//= require_tree . 19//= require serviceworker-companion

⑥node_modules/onsenui/css/onsenui.css

css

1/*! onsenui - v2.10.4 - 2018-07-20 */ 2@import url("./ionicons/css/ionicons.min.css"); 3@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css"); 4@import url("./font_awesome/css/font-awesome.min.css"); 5 6~以下スタイルの記述なので省略~

試したこと

開発環境でも起きていた問題ですが、onsenuiのフォルダを下記の構成にしてエラー回避していました。

node_modules ∟onsenui ∟fonts//追加    ∟font_awesome,ionicons,material-design-iconic-fontの各フォントファイル ∟css ∟onsenui.css ∟font_awesome ∟css ∟fonts    ∟各種フォントファイル ∟ionicons ∟css ∟fonts    ∟各種フォントファイル ∟material-design-iconic-font ∟css ∟fonts    ∟各種フォントファイル

上記の状態でコンパイルすると、bin/webpackが通ります。
その後、assets:precompileをするとコンパイルは可能です。
ですが、その後オンラインで状況を確認するとUncaught Error: Cannot find module "onsenui/css/onsenui.css"となるため、根本的な解決になっていないと考えています。

補足情報(FW/ツールのバージョンなど)

rails 5.2.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

現状、とりあえずコンパイルだけ通す方法はみつかった次第です。
onsenui.cssの下記のimport部分を修正しました。

//onsenui.css(変更前) @import url("./ionicons/css/ionicons.min.css"); @import url("./material-design-iconic-font/css/material-design-iconic-font.min.css"); @import url("./font_awesome/css/font-awesome.min.css");
//onsenui.css(変更後) @import "~onsenui/css/ionicons/css/ionicons"; @import "~onsenui/css/material-design-iconic-font/css/material-design-iconic-font"; @import "~onsenui/css/font_awesome/css/font-awesome";

いちおうこれで通ってはいますが、iconを読み込めなかったりしてます。そこはfont-awesomeを直接当てて対処してるので、上記のiconが読めないことに関しても無視はできますが、完全に機能しているわけではなさそうです。

正式な対応方法が知りたいところです、、、。

投稿2018/09/28 04:46

編集2018/09/28 04:48
ys3128

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

これ ttf-loader 入れてありますか?

追記

ちょっとソース追ってみたんですが、
url('../fonts/Material-Design-Iconic-Font.ttf')
こういう書き方してありますね。
これ、確かwebpackが見てるルートパスから見た相対パスとして解釈されるとかだった記憶が。

解決方法があったかどうか…ちょっと覚えてません。
url-loaderとかでどうにかなったような気もしないでもないですが、お役に立てずすみません。

投稿2018/09/27 02:31

編集2018/09/27 03:31
spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ys3128

2018/09/27 02:55

ご回答ありがとうございます。 確認したところ、ttf-loaderは入っていました。 loader系はnode_modules配下を検索したところ下記の内容が入っています。 ・babel-loader ・css-loader ・file-loader ・json-loader ・postcss-loader ・sass-loader ・vue-loader ・style-loader ・ttf-loader また、省略したことで分かりづらくしてしまい申し訳ありませんでしたが、ttf以外にもwoff,eot,svgの読み込みエラーが発生しており、特定のファイル形式が読み込めない、という感じではないのかな?と考えております。 上記の質問以外で書かれているエラー ``` ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:55427-55478 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.woff' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:55338-55390 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.woff2' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:55247-55300 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131270-131313 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131193-131244 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.svg?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131650-131701 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.ttf?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131558-131609 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131378-131431 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff?v=4.7.0' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:131469-131521 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/ionicons.eot' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:611-643 7:669-701 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/ionicons.svg' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:900-932 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/ionicons.ttf' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:753-785 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css Module not found: Error: Can't resolve '../fonts/ionicons.woff' in '/var/www/rails/pwa_app/node_modules/onsenui/css' @ ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/onsenui/css/onsenui.css 7:828-861 @ ./node_modules/onsenui/css/onsenui.css @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/packs/components/app.vue @ ./app/javascript/packs/components/app.vue ```
ys3128

2018/09/27 03:33

追記ありがとうございます! なるほど。 確かにwebpackからの相対パスと捉える形になるのであれば読み込みはできなさそうですね、、、。 url-loaderを一度調べてみます。ご意見ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問