Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub



Gatsby plugin for enabling wix/stylable support.


npm install --save gatsby-plugin-stylable

How to use

Just install this plugin and enable it in your gatsby-config.js.

// gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-stylable`],

If you have any other plugins that add CSS loaders to your Webpack config, make sure to place this plugin after them.

If you want to configure @stylable/webpack-plugin, you may pass additional configuration options as shown below (the default configuration is shown):

// gatsby-config.js

module.exports = {
  plugins: [
      resolve: `gatsby-plugin-stylable`,
      options: {
        experimentalHMR: false,
        optimize: {
          classNameOptimizations: false,
          shortNamespaces: false,

NOTE: optimize.classNameOptimizations and optimize.shortNamespaces are disabled since they will break production builds. Re-enable them at your own risk.


This plugin support any configuration options available to @stylable/webpack-plugin. For a full list, see here.


Copyright © 2019 Aaron Ross. Use of this project is governed by an ISC license.

© 2023 Gatsby, Inc.