Good afternoon. I'm in troubles a few days ago because I can't load fonts and images that I have stored in public folder.
As you can see, i have a main.scss file that have some variables, font-faces and a mixin.
$primaryGreen: #1e8b22;
$secondaryGreen: #0dee15;
$primaryRed: #962525;
$secondaryRed: #f50404;
$primaryGray: #333333;
$White: #ffffff;
$okGreen: #0dee15;
$errorRed: #f50404;
$alertYellow: #fffb00;
$hintBlue: #0064e7;
$whiteText: #ffffff;
$blackText: #000000;
@font-face {
font-family: logoWhite;
src: url('/public/assets/fonts/JFRocOut.eot') format('opentype');
};
@font-face {
font-family: logoBlack;
src: url('/public/assets/fonts/JFRocSol.TTF') format('truetype');
};
@font-face {
font-family: titleFont;
src: url('/public/assets/fonts/Boogaloo.ttf') format('truetype');
};
@font-face {
font-family: textFont;
src: url('/public/assets/fonts/Baloo2.ttf') format('truetype');
};
@mixin reset {
margin: 0px;
padding: 0px;
}
Well, then I have a navbar.scss, where i call a font-face and an image via url, but they don't work.
@import 'main';
body{
@include reset;
}
#navbar{
height: 61px;
width: 100%;
background-color: $primaryGray;
display: grid;
grid-template-columns: 1fr 3fr 2fr;
}
#logo{
font-family: logoWhite;
text-align: center;
vertical-align: middle;
color: white;
}
#pageBody{
width: screen;
height: 100vh;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
background-image: url('/public/assets/images/Minulogo.png');
}
But fonts and images don't display.
If this helps, my webpack.mix.js is like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js');
mix.sass('resources/sass/app.scss', 'public/css', {
implementation: require('node-sass')
})
.sass('resources/sass/navbar.scss', 'public/css', {
implementation: require('node-sass')
})
.sourceMaps();
@erikgr10@gmail.com Actually you doesn't need to put fonts and images file under public folder.You can put under resources folder. For example, you put fonts files under resources and so you call like this -
// I think your main.scss file under sass.
@font-face {
src: url('../fonts/yourfont.ttf');
};
And Then run npm run dev .Your fonts file will generate under public folder.
@YeZawHein If I do that, when I change only the first font-face, it seems to go well, zero errors, the fonts are generated in public folder and mix compiling, but when I refresh the browser it stills without working. Then, if I try to change the rest of the face-fonts, Mix throws me a
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
(Source code omitted for this binary file)
at handleParseError (C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:971:19)
at C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:1090:5
at processResult (C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:795:11)
at C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:855:5
at C:\xampp\htdocs\minuapp\node_modules\loader-runner\lib\LoaderRunner.js:406:3
at iterateNormalLoaders (C:\xampp\htdocs\minuapp\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
at C:\xampp\htdocs\minuapp\node_modules\loader-runner\lib\LoaderRunner.js:223:4
at C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:829:15
at eval (eval at create (C:\xampp\htdocs\minuapp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
ERROR in ./resources/sass/navbar.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process
(Source code omitted for this binary file)
at handleParseError (C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:971:19)
at C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:1090:5
at processResult (C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:795:11)
at C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:855:5
at C:\xampp\htdocs\minuapp\node_modules\loader-runner\lib\LoaderRunner.js:406:3
at iterateNormalLoaders (C:\xampp\htdocs\minuapp\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
at C:\xampp\htdocs\minuapp\node_modules\loader-runner\lib\LoaderRunner.js:223:4
at C:\xampp\htdocs\minuapp\node_modules\webpack\lib\NormalModule.js:829:15
at Array.eval (eval at create (C:\xampp\htdocs\minuapp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
at runCallbacks (C:\xampp\htdocs\minuapp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:27:15)
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 4 errors
@erikgr10@gmail.com Show me package.json
@YeZawHein Sure, here you have it.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
"node-sass": "^7.0.1"
}
}
@erikgr10@gmail.com Laravel mix 6.0 doesn't need node-sass .laravel mix documentation
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/navbar.scss', 'public/css');
If you use Vue
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/navbar.scss', 'public/css')
.vue();
Then npm run watch.
@YeZawHein Yeah, I know, but I tryied it to see if the error dissapears, but don't :(
Please or to participate in this conversation.