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などをそのファイルからの相対パスで記述していますがエラーは発生していません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。