artisticre
7 months ago

SCSS Files & Shared Hosting

Posted 7 months ago by artisticre

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>

Please sign in or create an account to participate in this conversation.