importing css to scss not working in laravel

Question

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.

Is the css file path wrong? You can try add a simple file, the path is same with app.scss. — lighter
– lighter, Commented Sep 11, 2018 at 4:16
I use this // Bootstrap @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";. It's work for me. — lighter
– lighter, Commented Sep 11, 2018 at 4:19

Elvis Mugabi · Accepted Answer · 2018-09-11 05:16:30Z

1

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.

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();
Now run npm run watch again.

This will result in a new file mix-manifest.json being created under the public folder.
Then modify your blade template as follows

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

answered Sep 11, 2018 at 5:16

Elvis Mugabi

3471 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rwd · Accepted Answer · 2018-09-11 06:31:12Z

1

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

@import '~tjdbs4/tjdb4';

answered Sep 11, 2018 at 6:31

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

3 Comments

mafortis Over a year ago

unfortunately it doesn't work, i updated my question.

Rwd Over a year ago

@mafortis If you run npm run dev from a new tab, wait for it to finish and then scroll back up, can you confirm there are definitely no errors? Is this a public or private package by the way?

mafortis Over a year ago

definitely no error ibb.co/iYPXEp , so far is public. npmjs.com/package/tjdbs4

Ru Chern Chong · Accepted Answer · 2018-09-13 02:25:31Z

0

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)

edited Sep 13, 2018 at 2:25

answered Sep 12, 2018 at 9:56

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

6 Comments

Ru Chern Chong Over a year ago

@mafortis you are missing a from

mafortis Over a year ago

I realized that and tried with different ways it seems is not allowed to be in app.js file as they are styles they must be load in app.scss file

Ru Chern Chong Over a year ago

What is the error? I personally am importing FontAwesome into .js file and it worked

Ru Chern Chong Over a year ago

Hold up, I see something potentially wrong with the package path. Let me confirm that and get back to you

mafortis Over a year ago

The error refers to imported files as i shared image. Ps: for other ways i tried errors almost same

|

Collectives™ on Stack Overflow

importing css to scss not working in laravel

Code

Update

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

Update

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related