Provides drop-in support for Less stylesheets
npm install --save less gatsby-plugin-less
- Include the plugin in your
gatsby-config.js
file. - 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,
},
},
},
]
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 is also included to handle some default optimizations like autoprefixing a 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 sepecify plugins in the plugin options
// in gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-less`,
options: {
postCssPlugins: [somePostCssPlugin()],
},
},
]
-
less
is moved to a peer dependency. Installing the package alongsidegatsby-plugin-less
is now required. Usenpm 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`),
},
},
]