Webpack and Bulma CSS compilation Error

Hi @chintan

First of all, npm run dev gives better errors.. Second, it would help if you show how you import the files..

Let's see your webpack and app.scss file. How are you including bulma?

In my app.scss file I have the following, it means you don't have to do anything funky like ../../../node_modules/ etc.

@import "~bulma";

I've got the same issue, this is my setup:

app.scss

@import "bulma"

body {
    color: pink;
}

webpack.mix.js

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

package.json

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "browser-sync": "^2.18.7",
    "browser-sync-webpack-plugin": "^1.1.4",
    "bulma": "^0.3.1",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.7.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-router": "^2.2.0"
  }
}

Update, already fixed my issue. I forgot the semicolon after my import declaration, DOH! :-)

I was just about to say ;)

Hey guys thanks for your replies. After having the same setup as @vercoutere am still having the issue

@SaeedPrez Here the output of 'npm run dev'

 ERROR  Failed to compile with 1 errors

 error  in ./~/bulma/bulma.sass

Module parse failed: /Users/chintan/Sites/api/node_modules/bulma/bulma.sass Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| /*! bulma.io v0.3.1 | MIT License | github.com/jgthms/bulma */
| @charset "utf-8"
| 
| @import "sass/utilities/_all"

 @ ./resources/assets/js/app.js 17:0-26
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

@mstnorris app.scss

@import "~bulma";

webpack.mix.js

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

package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bulma": "^0.3.1",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.7.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}

I think its something related to compilation of bulma.scss

do this

app.scss


@import "node_modules/bulma/bulma";

this works for me

nope. Its still the same. thanks for your suggestion.

Maybe install node-sass and sass-loader. Works for me

npm i node-sass sass-loader

Try @import './node_modules/bulma/bulma.sass';

@Leuchte @alenabdula tried but still the error is same. So have reference the css file from CDN. Hope I can sort it out .

P.S. I am using in app.js something like

import Bulma from 'bulma'
Vue.use(Bulma)

Is that the correct way ?

Bulma is a css framework and you can't "use" it with vue this way.

If you use the CDN version, you can just add the script-tag to your main template.

@chintan

Like @Leuchte said Bulma is CSS not JS. You compile it to your app.css file, and use its classes to mockup a template, component, etc... So your setup should take the shape of following:

/* webpack.mix.js */
const { mix } = require('laravel-mix');

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

In your layout file you should have something similar to following:

<head>
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
<body>
<!-- page content -->

<script src="{{ mix('/js/app.js') }}"></script>
</body>

And SCSS! Moreover, if you need to change variables in Bulma place them above the @import, like so:

// app.scss
$body-background: whitesmoke;
@import './node_modules/bulma/bulma.sass';

Hope that helps.