'Install Bulma in Laravel 9

I already have a project in Laravel 9. I want to convert the UI to use Bulma. I don't want to use the CDN. I've read the documentation about doing it in an older version of Laravel as well as a new install. I want to know how to add Bulma to an existing Laravel 9 application. Note I couldn't find an app.scss file in laravel. So far, I've run the following commands.

npm install bulma --save-dev

Created an app.scss file in the resources folder and added the following.

@import '~bulma/bulma';

However, I get the following error. What am I doing wrong? Unfortunately, there is scant documentation on it.

node_modules/bulma/bulma.sass:1 @charset "utf-8" ^

SyntaxError: Invalid or unexpected token at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1026:15) at Module._compile (node:internal/modules/cjs/loader:1061:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:999:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/home/zeenux/Programming/php/blog/webpack.mix.js:17:9) at Module._compile (node:internal/modules/cjs/loader:1097:14)

Solution 1:^[1]

This is how i tried it and it works fine, no issue with bulma

First

npm install bulma

Then in resources/css/app.css

@import 'bulma/css/bulma.min.css';

in blade

<head>
  .....
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
   <button class="button is-primary">
      Button
   </button>
</body>

Now i have tried your way with sass

in resources/sass/app.scss

//@import '~bulma/bulma';
   BOTH WORKS FINE
//@import 'bulma/css/bulma.min.css';

webpack.mix.js

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

So all works fine to me, what you are facing is probably npm version issue i am using 8.5.3 to install that run this npm install -g [email protected]. Please do keep in mind while playing with npm versions, install only that npm version which is compatable with all of your packages you are using in your project.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Vipertecpro

'Install Bulma in Laravel 9

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]