Level 20
npm run prod in terminal to update your public css file, and push it your hosting.
Jan 23, 2019
9
Level 5
SCSS Files & Shared Hosting
I have a site I have uploaded to a shared server. It is not rendering the SCSS files and just the public CSS file. Below is my app.scss and app.blade.php files. I don't think I am linking them correctly but not sure how.
// Fonts
// @import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
@import "node_modules/font-awesome/scss/font-awesome";
// Bulma
@import 'node_modules/bulma/bulma';
//Bulma Vue node_modules
@import 'node_modules/buefy/src/scss/buefy';
@import 'node_modules/pretty-checkbox/src/pretty-checkbox.scss';
@import 'helpers';
@import 'pagestyles';
@import 'navbar';
@import 'returntotop';
@import 'slider';
@import 'application';
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Training In Life Choices') }}</title>
<script src="{{asset('js/jquery.min.js')}}"></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript">
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('blue');
}
else {
$('nav').removeClass('blue');
}
})
$(document).ready(function(){
$(".menu h4").click(function(){
$("nav ul").toggleClass("active")
})
})
</script>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
<div id="app">
@include('inc.navbar')
@include('inc.slider')
@include('sections.about')
@include('sections.about-parallax')
@include('sections.services')
@include('sections.services-parallax')
@include('sections.ourteam')
@include('sections.team-parallax')
@include('sections.contact')
@include('sections.footer')
@yield('content')
</div>
@yield('script')
</body>
</html>
Level 5
I tried that and uploaded the resources folder as well as the public folder. Still not working...
Level 5
The Javascripts I have on it are not rendering either.
Level 20
What are the link generated by blade that you can see in the source code of the page ?
Are these url accessible ?
What is "not working" ? any error in console ?
Level 5
There are no errors. Just layouts such as navbar. I have navbar.scss that isn't showing. The text is there but the styling isn't. I have a slider at the top of the page that isn't showing because the JS isn't showing. Things like this. Its www.traininginlifechoices.com if you want to see it
Level 3
I just visited the website and everything seems fine on my end. I can see the navbar, the slider is working...
Maybe a caching problem on your end?
Level 5
Yeah I just noticed it. I tried on another device and it was working so I cleared cache and bingo. Thanks for your help
Level 20
You can close the thread choosing best answer thus.
Level 56
If you want "cache busting" add .version() to your mix configuration in 'webpack.mix.js' like so:
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')
.version();
Then in your view instead of {{ asset(...) }} use {{ mix('css/app.css') }} and {{ mix('css/app.js') }} like so:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- ... -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- ... -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
1 like
Please or to participate in this conversation.