gatsby-plugin-less

Provides drop-in support for Less stylesheets

Install

npm install --save less gatsby-plugin-less

How to use

1. Include the plugin in your gatsby-config.js file.
2. Write your stylesheets in Less and require or import them as normal.

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

If you need to pass options to Less use the plugins options; see less-loader for all available options.

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      strictMath: true,
    },
  },
]

If you need to override the default options passed into css-loader

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      cssLoaderOptions: {
        camelCase: false,
      },
    },
  },
]

If you need to provide Less plugins, normally you would provide a plugins in the Less options, but this option attribute is already used by Gatsby. It has been remapped to lessPlugins

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      lessPlugins: [MyLessPlugin],
    },
  },
]

With CSS Modules

Using CSS modules requires no additional configuration. Simply prepend .module to the extension. For example: App.less -> App.module.less. Any file with the module extension will use CSS modules.

PostCSS plugins

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

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      postCssPlugins: [somePostCssPlugin()],
    },
  },
]

Breaking changes history

v2.0.0

• less is moved to a peer dependency. Installing the package alongside gatsby-plugin-less is now required. Use npm install --save less
• support Gatsby v2 only
• theme option has been removed. You can pass configuration object to less-loader:

plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
-      theme: {
-        "text-color": `#fff`,
-      }
+      modifyVars: {
+        "text-color": `#fff`,
+      }
    },
  },
]

plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
-      theme: `./src/theme.js`,
+      modifyVars: require(`./src/theme.js`),
    },
  },
]