Sage 9 Webpack PostCSS Rucksack

sage
1

I’m experimenting with Sage 9 after taking a course on Webpack.

I managed to get Lost Grid installed by installing the NPM package and adding it to the “postcss” array.

Rucksack seems to be a little more difficult and I can’t seem to figure out how the PostCSS code integrates with the Sage WebPack config.

http://simplaio.github.io/rucksack/docs/#postcss

Any ideas? Much thanks for any help.

2

I don’t have any experience with either of those libraries, but according to the docs you linked, it looks like you could just add rucksack() to the postcss array in webpack.config.js, either before or after autoprefixer().

https://github.com/roots/sage/blob/sage-9/webpack.config.js#L180-L188

Just make sure you also import the lib at the top of the config, obviously.

var rucksack = require('rucksack-css');
3

Thanks for the response,

Unfortunately that’s what I tried and it didn’t work.

I’m thinking it probably needs to be incorporated in the loaders, but not quite sure how.

4

I got this working. Apparently I picked the one command in the package that was having issues.

Thanks

5

@christianmagill do you mind sharing your findings of what worked?

6

I ended up doing exactly what @QWp6t mentioned. I thought it hadn’t worked at first, but that was just because there was a conflict with some Sass that I was testing it on.