Laravel 9现有项目集成Bulma框架（非CDN方式）报错问题排查

Got it, let's break down why you're hitting that SyntaxError and fix it step by step. The core issue here is that Webpack's trying to parse Bulma's .sass file as JavaScript—this happens when either you're missing the right Sass compilation tools, or your Laravel Mix config isn't set up to handle Sass files properly.

1. Install Required Sass Dependencies #

Laravel Mix no longer includes Sass compilers by default, so let's add them first:

npm install sass sass-loader --save-dev

2. Correct the Import Path in app.scss #

The ~ syntax for referencing node_modules is deprecated in newer Webpack versions. Update your resources/app.scss to use a cleaner import:

// Option 1: Use the package name directly
@import 'bulma/bulma';

// Option 2: Explicitly point to the file if the above fails
@import '../node_modules/bulma/bulma.sass';

3. Update Your webpack.mix.js Config #

Make sure your Mix file is configured to compile Sass/SCSS files, not just plain CSS. Use the .sass() method instead of .css():

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

mix.js('resources/js/app.js', 'public/js')
   // This tells Mix to process your Sass file into valid CSS
   .sass('resources/app.scss', 'public/css');

Note: If you placed your app.scss inside a sass subfolder (like resources/sass/app.scss), adjust the path in the config to match that location.

4. Recompile Your Assets #

Clear old build artifacts and run the compilation again:

npm run clean
npm run dev

Bonus: Customize Bulma (Optional) #

Once things are working, you can tweak Bulma's default styles by defining custom variables before importing Bulma. For example:

// Override default theme colors
$primary: #2563eb;
$accent: #f97316;

// Import Bulma after setting variables
@import 'bulma/bulma';

That should resolve the syntax error and get Bulma fully integrated into your Laravel 9 project.

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