Laravel项目中CSS特殊字符报错致样式失效问题求助

问题说明 #

将包含Sass语法（$、@、&、@include等）的代码直接放在Laravel项目的public/css/login.css文件中时，浏览器会识别为语法错误，导致Blade模板无法渲染出预期的登录表单样式（预期为居中的白色登录框，带有背景动态波浪效果；实际仅显示无布局、无特效的普通表单）。该模板在CodePen中可正常运行，但在Laravel环境中失效。

现有代码 #

Blade模板

<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>

原Sass代码

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;
}

原因分析 #

你的代码使用的是Sass（SCSS）预处理器语法，但浏览器只能识别标准CSS语法，Laravel也不会自动解析public目录下的Sass文件。&嵌套、@include混合宏、darken()颜色函数等都是Sass独有的特性，直接作为.css文件加载会被浏览器判定为语法错误，导致样式失效。

解决方案 #

方法一：直接使用编译后的纯CSS #

将Sass代码编译为标准CSS后，替换public/css/login.css的内容。以下是编译后的可用代码：

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;
  transform: translate(-50%, -50%);
  transition: transform 300ms, box-shadow 300ms;
  box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}

.login::before, .login::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;
}

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

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

.login 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;
}

.login 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);
  transition: background-color 300ms;
}

.login button:hover {
  background-color: #232836;
}

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

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

方法二：使用Laravel构建工具编译Sass（推荐，便于后续维护） #

针对Laravel 9+（Vite）

1. 将Sass文件保存为resources/css/login.scss
2. 在vite.config.js中确保包含该文件，或在resources/js/app.js中导入：

   import '../css/login.scss';
   

3. 运行编译命令：

   npm run dev # 开发环境
   # 或
   npm run build # 生产环境
   

4. 在Blade模板中引入编译后的资源：

   @vite(['resources/css/login.scss'])
   

针对Laravel 8及以下（Mix）

1. 将Sass文件保存为resources/sass/login.scss
2. 在webpack.mix.js中添加编译规则：

   mix.sass('resources/sass/login.scss', 'public/css');
   

3. 运行编译命令：

   npm run dev # 开发环境
   # 或
   npm run production # 生产环境
   

4. 在Blade模板中引入编译后的CSS：

   <link rel="stylesheet" href="{{ asset('css/login.css') }}">
   

额外优化建议 #

• Blade模板中label标签的input-label是非法属性，建议改为class：<label class="input-label" for="username">User Name</label>
• 表单输入框需要添加name属性，否则登录请求无法传递参数：

  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  

内容的提问来源于stack exchange，提问作者Divine SCONTY