CODEWITHSUNDEEP
csslaravelwebpacksasslaravel-mix
mafortis
mafortis

Reputation: 7128

importing css to scss not working in laravel

I am trying to add package css file into my app.scss but it doesn't work,

Code

app.scss

@import '~tjdbs4/tjdb4.css';

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

when I run npm run watch it works successfully but the style doesn't add to app.css

any idea?

Update

this is my complete app.scss file

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/dist/bootstrap-vue.css';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~tjdbs4/tjdb4';



.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

when I use @import '~tjdbs4/tjdb4'; and run npm run watch command I get:

ERROR  Failed to compile with 2 errors                                                                                                  22:53:58
 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../webfonts/fa-brands-400.eot' in

but if i use @import '~tjdbs4/tjdb4.css'; and run npm run watch it doesn't show any error and also will not mix my css file with the rest of them.

Upvotes: 1

Views: 7007

Answers (3)

Ru Chern Chong
Ru Chern Chong

Reputation: 3756

Your error seemed to be an issue with FontAwesome fonts and specifically the brands icon set from them.

This whole chunk here in app.scss

@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

should be placed inside your main js file like the following

Example

app.js

import brands from '@fortawesome/fontawesome-free-brands'
import regular from '@fortawesome/fontawesome-free-regular'
import solid from '@fortawesome/fontawesome-free-solid'
import fontawesome from '@fortawesome/fontawesome'

fontawesome.library.add(brands)
fontawesome.library.add(regular)
fontawesome.library.add(solid)

Upvotes: 0

Rwd
Rwd

Reputation: 35170

You should be able to get this to work by removing the extension from the path:

@import '~tjdbs4/tjdb4';

Upvotes: 1

Elvis Mugabi
Elvis Mugabi

Reputation: 347

Since webpack is correctly resolving @import '~tjdbs4/tjdb4.css'; without splitting out a 'css-loader' error, it's likely you need to burst your browser cache.

You can fix this by versioning your compiled assets. Read more here.

  1. Make these changes in the webpack.mix.js file to turn on versioning.

    mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .version();

  2. Now run npm run watch again.

    This will result in a new file mix-manifest.json being created under the public folder.

  3. Then modify your blade template as follows

    <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> <script src="{{ mix('/js/app.js') }}"></script>

Upvotes: 1

Related Questions