How do I setup .less with a gatsby project?

Question

I"M using the gatsby-plugin-less plugin, but there are no real directions and it doesn't seem to be plug and play.

Answer 1

you would need to "activate" the plugin by adding it to your gatsby-config.js file in root folder. Then you just import the less file in your layout/index.js`.

// in gatsby-config.js
plugins: [
  `gatsby-plugin-less`
]

PostCSS is also included to handle some default optimizations like autoprefixing and common cross-browser flexbox bugs. Normally you don’t need to think about it, but if you’d prefer to add additional postprocessing to your Less output you can specify plugins in the plugin options.

plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      postCssPlugins: [somePostCssPlugin()]
    }
  }
]