laravel and css conflicts

Question

In my laravel project, public/css/login.css file, all the special characters such as $, @, &, and @include display an error, and because of that my blade template is not rendered with the desired styles. Please I have already customized a template on codepen and the result is great but I can't get it to work as expected.

This is the link to the codepen template https://codepen.io/deetheboss/pen/xxjammZ This is the expected result

this is my blade template

<form class="login" method="POST" action="{{ route('login') }}">
    @csrf
    <label input-label for="username" :value="__('User Name')">User Name</label>
    <input type="text" placeholder="Username"><br>

    <label input-label for="password" :value="__('Password')">Password</label>
    <input type="password" placeholder="Password"><br>
    
    <button>Login</button>
  </form>

and this is my CSS code

body {
  background-color:rgb(37, 43, 59);
  font-family: 'Asap', sans-serif;
}

.login {
  overflow: hidden;
  background-color: white;
  padding: 40px 30px 30px 30px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  @include transform(translate(-50%, -50%));
  @include transition(transform 300ms, box-shadow 300ms);
  box-shadow: 5px 10px 10px rgba(rgba(2, 128, 144, 1), 0.2);

  &::before, &::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-top-left-radius: 40%;
    border-top-right-radius: 45%;
    border-bottom-left-radius: 35%;
    border-bottom-right-radius: 40%;
    z-index: -1;
  }

  &::before {
    left: 40%;
    bottom: -130%;
    background-color: rgba(rgba(69, 105, 144, 1), 0.15);
    @include animation(wawes 6s infinite linear);
  }

  &::after {
    left: 35%;
    bottom: -125%;
    background-color: rgba(rgba(2, 128, 144, 1), 0.2);
    @include animation(wawes 7s infinite);
  }

   input {
    font-family: 'Asap', sans-serif;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    background: white;
    width: 100%;
    border: 1px solid rgb(37, 43, 59);
    padding: 10px 10px;
    margin: 15px -10px;
  }

   button {
    font-family: 'Asap', sans-serif;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    width: 80px;
    border: 0;
    padding: 10px 0;
    margin-top: 10px;
    margin-left: -5px;
    border-radius: 5px;
    background-color: rgb(37, 43, 59);
    @include transition(background-color 300ms);

    &:hover {
      background-color: darken(rgb(37, 43, 59), 5%);
    }
  }
}

@include keyframes (wawes) {
  from { @include transform(rotate(0)); }
  to { @include transform(rotate(360deg)); }
}

a {
  text-decoration: none;
  color: rgba(white, 0.6);
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
}

this is the outcome I got

Answer 1

You are putting SCSS instead of CSS in your file. And that's why you get errors.

The easiest way to have that CSS is to cope the Compiled CSS instead of SCSS styles, to do that, on codepen, you can simply click on down arrow in front of the CSS (SCSS) tab and click on View Compiled CSS, then you will see the compiled CSS and can copy that.