CODEWITHSUNDEEP
npm-scriptsbulmalaravel-9
Hash
Hash

Reputation: 21

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)

Upvotes: 1

Views: 1784

Answers (1)

Vipertecpro
Vipertecpro

Reputation: 3284

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.

Upvotes: 3

Related Questions