Adding LostGrid to Ruby on Rails with webpack

First poster here. I just created a new Rails project with webpack (rails new myapp --webpack). It comes with PostCSS and I wanted to add LostGrid to it. I ran the following, from the installation instructions from Lost:

npm install --save lost

This added Lost to package.json. The instructions then say to add the following to your webpack config, assuming you have postcss-loader installed & configured (which I understand was installed automatically when the project was created):

postcss: [
  require('lost')
]

But I don't understand where the file is. I thought that I needed to add my PostCSS stuff to .postcssrc.yml in the root. I did this but I still don't get it to work.

I have very little experience with webpack and suspect that my approach is entirely flawed. I was excited to use PostCSS in Rails and would appreciate any help in getting to make LostGrid work here. Thanks!

Solution

Found your question moments after I ran into the same issue. Fortunately it's really simple!

When you run webpacker:install it installs a file called .postcssrc.yml in the root folder of the project. This is where you add thePostCSS plugins. Mine now looks like this:

  plugins:
      lost: {}
      postcss-smart-import: {}
      postcss-cssnext: {}
      autoprefixer: {}

I am not sure yet whether the order matters. Still researching that.

See Webpacker issue #283 which is essentially the same question, but without an example provided.