为什么我的 SCSS 即使在我用 React.js 搭建的 Laravel 项目中的 webpack.mix.js 中也无法加载？答案

【问题标题】：Why won't my SCSS load even though it's in the webpack.mix.js in my Laravel project that's scaffolded with React.js?为什么我的 SCSS 即使在我用 React.js 搭建的 Laravel 项目中的 webpack.mix.js 中也无法加载？
【发布时间】：2021-01-17 01:36:00
【问题描述】：

我不确定为什么我的 SCSS 不会加载到我的 VideoBackground.js 组件中，即使它位于我的 Laravel 项目的 webpack.mix.js 文件中，该文件是用 React.js 搭建的。在VideoBackground.js 文件中声明的videoBackground.scss 文件的文件路径以及在webpack.mix.js 中声明的路径是正确的。

注意：sass 文件夹中有一个 app.scss 文件，我相信它是在使用 React.js 搭建我的 Laravel 项目时开箱即用的。我需要使用它吗？

如何解决我的问题？

这是我的webpack.mix.js：

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

mix.react('resources/js/components/VideoBackground/VideoBackground.js', 'public/js')
.sass('resources/sass/VideoBackground/videoBackground.scss','public/css');

这是我的VideoBackground.js 组件：

import React from 'react';
import '../../../sass/VideoBackground/videoBackground.scss';

function VideoBackground() {
   return(
    <>
      <h1 className="yo">yo</h1>
    </>
   );
}

export default VideoBackground;

【问题讨论】：

您是否已将所有 css 文件包含在 app.scss 文件中？ app.scss 用于搭建你所有的 css 和 scss 文件，然后在 webpack.mix.js 中你只捆绑 app.scss 文件。当然，您还需要在您的 javascript 脚本之前在您的主刀片中添加您的样式表脚本 (public/app.css)。
@Moj 知道了，谢谢！！！

标签： javascript php reactjs laravel debugging

【解决方案1】：

app.scss 主要用于构建所有 css 和 scss 文件。您将所有样式表文件包含在 app.scss 中，然后在 webpack.mix.js 中使用 app.scss 生成捆绑包 public/app.css。

此外，在主刀片文件中，您需要在 javascript 标签之前添加样式表标签 (public/app.css)，一切都应该没问题。

【讨论】：