3

I have this really simple webpack projects in with I now want to also use bulma a css framework.

I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:

import bulma from '~bulma/bulma.sass';

I also tried using a specific sass part, which also did not work:

import bulma from '~bulma/sass/base/_all';

Can you help me get this working or maybe point me in the right direction?

lony
  • 6,733
  • 11
  • 60
  • 92

1 Answers1

5

You need to update your webpack config file so the sass loader also processes sass files, not only scss files.
Change this line: test: /\.scss$/, to test: /\.(sass|scss)$/

Nora
  • 3,093
  • 2
  • 20
  • 22
  • I use `import 'bulma/bulma.sass';` and I see no errors, does this work for you? – Nora Aug 17 '17 at 08:47
  • That was the solution, thank you! For the record I had an `Module not found: Error: Can't resolve '~bulma/bulma.sass'` error. – lony Aug 17 '17 at 08:54
  • 1
    If like me you want to know what is the difference between sass and scss look at https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass – lony Aug 17 '17 at 08:54
  • Can I ask a follow up question? Considering I added all your improvements [here](https://github.com/lony/js-npm-webpack/tree/4bd3539f32b1915cc60cdb1ad4f2d150bf511205) I have the problem that my `npm run prod` version differece from `npm run dev` it seems something is different in the resulting css. Analysing it a bit deeper it may be the result of the PurifyCSSPlugin. Do you know what is wrong with my setup? How can I debug the cause more precisely? – lony Aug 17 '17 at 20:49