Level 102
How do you compile assets? Using npm run dev? What is the content of app.scss?
Mar 13, 2020
32
Level 1
Laravel mix not compiling scss files
Hi, I just started learning Laravel and I've got a good understanding of routes, views, and layouts. my problem is with compiling assets and especially scss, I'm trying to set up laravel mix to compile my scss when I make a change and run npm run watch i get that nothing is wrong but nothing changes. does anyone can help me with this, please? It's been two days and I'm still having this problem, I've tried everything but nothing works. (I've tried deleting node_modules and run npm install it doesn't work)
My webpack.mix.js looks like this:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Level 1
I've compiled them using npm run dev and using npm run watch and run watch-poll and nothing works some bootstrap classes not working either like "well" class the content of the app.sccss
// Body
$body-bg: #0000; // I've tested with the bg color and it won't change
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
Level 102
You are just setting a bunch of variables? Did you mean to import bootstrap?
Add this underneath
@import "~bootstrap/scss/bootstrap";
1 like
Level 1
I didn't even begin setting my own variables and my own project (I'm still learning), I can't start if scss won't compile and I've imported bootstrap on my app.scss file
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
Level 102
Well start from something simple and work your way up.
Add this to your app.scss as the only thing
body {
background: red !important;
}
Now compile and check the content of your /public/css/app.css file
Level 1
It gives me the same thing on my /public/css/app.css file
body { background: red !important; }
1 like
Level 2
I have the same issue and body { background: red !important; solve my issue but why @giperib162 ?
Level 102
Congratulations. You just successfully compiled your first scss file. Now you can try adding the import for bootstrap and recompiling. See if the css file changes
Level 1
Now I've added the font and the variables only, it gave me just the font on the app.css file
Level 102
As it should. A variable cannot be compiled to anything. Only used.
For example
$blue: #3490dc;
body {
background: $blue;
}
Level 102
That is why you import bootstrap, and compile it yourself. So you can override their variables
Level 1
Okay, I've imported bootstrap and now the variables don't work, for example, I changed the background color to black but on the website it's not black, plus some bootstrap classes doesn't work either
Level 102
Please post what you have currently. And don't move your own variables to another file until you know it works. And what classes does not work?
Level 1
I have a big app.css file with many selectors and elements (i think that what bootstrap did) I've tried to put a sidebar into a well so I've changed its class to "well" but it doesn't work
Level 53
@giperib162 npm install bootstrap.
app.scss:
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
https://github.com/laravel/ui/blob/2.x/src/Presets/bootstrap-stubs/app.scss
_variables.scss:
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
https://github.com/laravel/ui/blob/2.x/src/Presets/bootstrap-stubs/_variables.scss
Level 1
My files are exactly like these. the problem is when I try and change $body-bg: #000000 it won't work for some reason
Level 102
Can you show how you are importing all your css files in your blade file?
Level 1
of course, I'm importing them like this
<link rel="stylesheet" href="css/app.css">
Level 53
@giperib162 make sure it's not cached in the browser.
Level 1
I've tried different browsers and even changed servers I've used XAMMP and MAMP
Level 102
Please add, ``` on the line before and after your code to format it. You can just edit the post
Level 102
Is that the only css you are importing. You aren't importing other libs, or perhaps bootstrap?
Also either use the asset helper, or prefix with a slash before css
<link rel="stylesheet" href="/css/app.css">
Level 1
That's the only one I'm importing, here's the whole header
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<link href="css/app.css" rel="stylesheet">
</head>
Level 1
if I use it this way with a slash before <link rel="stylesheet" href="/css/app.css"> the css don't work
Level 102
What is the root of your website? It should be /
You can use the asset helper
<link rel="stylesheet" href="{{asset('css/app.css') }}">
Is you variables.scss file prefixed with underscore?
_variables.scss
Level 1
I don't understand what you mean by the root of my website sorry, but i access my website via localhost/mywebsite/public
and yes my variables.css is prefixed with an underscore
Level 102
Ok it seems your webserver isn't correctly configured. Just leave it for now. Use the asset helper and set the url in env file.
Sadly I am out of ideas for now
Level 1
I've tried the asset helper and it didn't do anything, but thanks anyway.
I'll try to search how to configure my server maybe that will help, thanks again
Level 53
@giperib162 consider using Laravel Homestead or Laravel Valet if you're on mac.
Level 1
Thank you i'll try them too
Level 1
I notice myself that Laravel Mix doesn't compile SCSS files when using lazy loading in routes with vue-router. When using static loading (import X from 'x'), SCSS compiling works again!
I don't know yet why it is so. Have you tried this?
Please or to participate in this conversation.