Provides drop-in support for Less stylesheets
npm install gatsby-plugin-less
gatsby-config.js
file.// in gatsby-config.js
plugins: [`gatsby-plugin-less`]
If you need to pass options to the Less loader use the loaderOptions
and to Less use lessOptions
object; see less-loader
for all available options.
// in gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-less`,
options: {
loaderOptions: {
appendData: `@env: ${process.env.NODE_ENV};`,
},
lessOptions: {
strictMath: true,
plugins: [new CleanCSSPlugin({ advanced: true })],
},
},
},
]
If you need to override the default options passed into css-loader
Note: Gatsby is using css-loader@^5.0.0
.
// in gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-less`,
options: {
cssLoaderOptions: {
camelCase: false,
},
},
},
]
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. CSS modules are imported as ES Modules to support treeshaking. You’ll need to import styles as: import { yourClassName, anotherClassName } from './app.module.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
// in gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-less`,
options: {
postCssPlugins: [somePostCssPlugin()],
},
},
]
less-loader
options now possible with the object loaderOptions
.less
options moved to the object lessOptions
because of api change on less-loader
v6.less
is moved to a peer dependency. Installing the package alongside gatsby-plugin-less
is now required. Use npm install 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`),
},
},
]
Author: gatsby
Source: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-less
License: