為什么我的 SCSS 無法加載，即使它位於我使用 React.js 搭建的 Laravel 項目中的 webpack.mix.js 中？

Question

我不確定為什么我的 SCSS 不會加載到我的VideoBackground.js組件中，即使它位於使用 React.js 搭建的 Laravel 項目的webpack.mix.js文件中。 在videoBackground.scss文件中聲明的VideoBackground.js文件的文件路徑以及在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;

Answer 1

app.scss 主要用於構建所有 css 和 scss 文件。 您將所有樣式表文件包含在 app.scss 中，然后在 webpack.mix.js 中包含您使用 app.scss 生成捆綁包 public/app.css。

此外，在主刀片文件中，您需要在 javascript 標記之前添加樣式表標記 (public/app.css)，一切都應該沒問題。