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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

1342閲覧

Laravel-mixでimportしたscssファイルの@font-faceの相対パスが認識されない

torabe

総合スコア18

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

1クリップ

投稿2019/05/31 07:22

編集2019/05/31 07:30

Laravel-mixでWebサイトで構築する際ページごとの個別にcssを出力するために
下記のようなディレクトリの構造で複数のapp.scssから_font.scssをインポートしました。

┬ sass ┬ pages ─ app.scss
│ ├ app.scss
│ └ _fonts.scss
└ fonts ─ フォントファイル

scss

1/sass/app.scss 2@import "fonts"; 3 4/sass/pages/app.scss 5@import "../fonts"; 6 7/sass/_fonts.scss 8@font-face { 9 font-family: 'myfont'; 10 src:url('../fonts/フォントファイル') format("woff"); 11} 12

この状態でトランスパイルすると以下のようなエラーが発生してしまいます。

ERROR

1ERROR in ./resources/assets/sass/pages/app.scss (./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/src??postcss3!./node_modules/resolve-url-loader??ref--8-4!./node_modules/sass-loader/lib/loader.js??ref--8-5!./resources/assets/sass/pages/app.scss) 2Module not found: Error: Can't resolve '../fonts/フォントファイル' in 'ルートパス\resources\assets\sass\pages' 3 @ ./resources/assets/sass/pages/app.scss (./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/src??postcss3!./node_modules/resolve-url-loader??ref--8-4!./node_modules/sass-loader/lib/loader.js??ref--8-5!./resources/assets/sass/pages/app.scss) 7:126-169 4 @ ./resources/assets/sass/pages/app.scss

resolve-url-loaderがあるのでimport先のscssファイルのurl()はそのファイルからの相対パスという認識でいたのですが間違いでしょうか?
それともほかに原因があるのでしょうか?

パッケージと各バージョンは以下のようになっています。

"devDependencies": { "axios": "^0.17", "babel-preset-react": "^6.23.0", "bootstrap-sass": "^3.3.7", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.15", "lodash": "^4.17.4", "react": "^15.4.2", "react-dom": "^15.4.2", "resolve-url-loader": "^2.3.1", "sass-loader": "^7.1.0", "vue": "^2.6.10", "vue-template-compiler": "^2.6.10" },

ちなみにsassフォルダには_fonts.scss以外にもimportされるためのscssファイルがあり、その中のbackground-imagesなどをそのファイルからの相対パスで記述していますがエラーは発生していません。

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

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

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

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

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

guest

回答1

0

自己解決

解決というかはわかりませんが、とりあえずエラーは解消されましたので記入します。

現状、各フォルダにあるapp.scssには必要なscssファイルのみインポートしていましたが、
全て同じファイルをインポートすることで理由はわかりませんがうまくいきました。

投稿2019/06/11 05:17

torabe

総合スコア18

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問