Gatsby: [V2] gatsby-plugin-less doesn't work

[uciska]

Hi, did anyone manage to run gatsby-plugin-less with Gatsby V2?
It works very well on Gatsby V1 but not on the V2.

I did as indicated by the author of the plugin:

I installed less and :

// in gatsby-config.js
module.exports = {
  siteMetadata: {
    title: 'Mon site'
  },
  plugins: [
    {
      resolve: `gatsby-plugin-less`,
      options: {
        modifyVars: {
          'text-color': `#fff`
        }
      }
    }
  ]
}

It returns an error:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @primary-color: 'blue'

[KyleAMathews]

Does it work without plugins?

[uciska]

Nope, exactly the same error with or without plugin.

[KyleAMathews]

Could you create a site which reproduces the problem?

[pieh]

Did you check https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-less#v200? (f.e. you need to additional install less in v2 version)

[uciska]

@pieh Yes I did exactly that.

@KyleAMathews
Example with ant-design :
Gatsby V1 work fine : https://github.com/uciska/gatsby-less-v1
Gatbsy V2 Less files do not compile : https://github.com/uciska/gatsby-less-v2

Thanks for your support!

[pieh]

@uciska, You need to update gatsby-plugin-less to next (it's v1 right now). You will also need to add update your gatsby config and add javascriptEnabled: true, to gatsby-plugin-less config (seems like antd needs it)

[uciska]

@pieh Awesome ! It works perfectly. Thank you !

How to know when a plugin has a next version ?

[chilijung]

@uciska can you share your setting file? I am encountering the same issue, thanks!

[uciska]

@chilijung Yes I updated my repo : https://github.com/uciska/gatsby-less-v2

TL;DR :

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Mon site'
  },
  plugins: [
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#BADA55'
        }
      }
    }
  ]
}

And update package :

// package.json

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "gatsby": "next",
    "gatsby-plugin-less": "next",
    "less": "^3.0.4",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }
}

[LekoArts]

How to know when a plugin has a next version ?

There are many ways to check that, one of them would be to check the package on npmjs.com:
https://www.npmjs.com/package/gatsby-plugin-less?activeTab=versions

[m-allanson]

You can also use npm dist-tags ls <package-name>, e.g.

npm dist-tags ls gatsby-plugin-less
canary: 2.0.0-alpha.80a21f04
latest: 1.1.8
next: 2.0.0-beta.3

[pieh]

Issue resolved so I'll close it.

I wonder if it's worth to update installation docs in master:

-npm install --save less gatsby-plugin-less
+npm install --save less gatsby-plugin-less@next

@chilijung If you can't resolve your problem using @uciska's repo as base, please create separate issue with more details.

[uciska]

Thanks @m-allanson @LeKoArts

@pieh I think it's worth. At the end of the doc with the v2 info.