@guanghechen/gatsby-plugin-stylus v1.7.0

Provides drop-in support for Stylus, and generate *.d.ts for Stylus files.

Install

• npm

  npm install @guanghechen/gatsby-plugin-stylus --save-dev

• yarn

  yarn add @guanghechen/gatsby-plugin-stylus --dev

Usage

Add configs in gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: '@guanghechen/gatsby-plugin-stylus',
      options: {
        shouldUseSourceMap: false,
        shouldGenerateDts: true,
        cssLoaderOptions: {
          modules: {
            localIdentContext: path.resolve(__dirname, 'src'),
            exportLocalsConvention: 'camelCaseOnly',
          }
        }
      }
    }
  ]
}

Then, import *.module.styl in js|jsx|ts|tsx files:

import classes from './style.module.styl'

console.log('classes:', classes)

Options

• shouldGenerateDts only works for stylus files enabled module options. You can change the file pattern of the modular stylus by modifying moduleStylusRule.test, similar to the following similar to the following configuration.

  // gatsby-config.js
  module.exports = {
    plugins: [
      {
        resolve: '@guanghechen/gatsby-plugin-stylus',
        options: {
          moduleStylusRule: {
            test: /\.custom\.styl$/,
          },
          shouldGenerateDts: true,
          cssLoaderOptions: {
            modules: {
              localIdentContext: path.resolve(__dirname, 'src'),
              exportLocalsConvention: 'camelCaseOnly',
            }
          }
        }
      }
    ]
  }