Skip to main content
View plugin on GitHub
See starters using this

gatsby-plugin-stylable

npm

Gatsby plugin for enabling wix/stylable support.

Install

npm install --save stylable gatsby-plugin-stylable

How to use

Just install this plugin alongside stylable 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.

Options

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

License

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