Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-plugin-stylable

npm

Gatsby plugin for enabling wix/stylable support.

Install

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.

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.

© 2023 Gatsby, Inc.