@yozora/gatsby-plugin-stylus

@guanghechen/gatsby-plugin-stylus

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

Name	Required	Type	Default	Description
stylusRule	false	object	-	Additional webpack rule for *.styl
moduleStylusRule	false	object	-	Additional webpack rule for *.module.styl
shouldUseSourceMap	false	boolean	false	Whether to generate sourcemaps
shouldGenerateDts	false	boolean	false	Whether to generate *d.ts for *.module.styl files
cssLoaderOptions	false	object	-	Options for css-loader
stylusLoaderOptions	false	object	-	Options for stylus-loader
postcssLoaderOptions	false	object	-	Options for postcss-loader

---

• 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',
            }
          }
        }
      }
    ]
  }