npm

Don't miss out on this year's npm Pride t-shirt designs!Order your favorites here »

gatsby-plugin-postcss

2.1.0 • Public • Published

gatsby-plugin-postcss

Gatsby plugin to handle PostCSS.

Install

npm install --save gatsby-plugin-postcss

How to use

  1. Include the plugin in your gatsby-config.js file.
  2. Write your stylesheets using PostCSS (.css files) and require or import them as normal.
// in gatsby-config.js
plugins: [`gatsby-plugin-postcss`],

If you need to pass options to PostCSS use the plugins options; see postcss-loader for all available options.

With CSS Modules

Using CSS modules requires no additional configuration. Simply prepend .module to the extension. For example: App.css -> App.module.css. Any file with the module extension will use CSS modules.

PostCSS plugins

If you would prefer to add additional postprocessing to your PostCSS output you can specify plugins in the plugin options:

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
    },
  },
],

Alternatively, you can use postcss.config.js to specify your particular PostCSS configuration:

// in postcss.config.js
const postcssPresetEnv = require(`postcss-preset-env`)
 
module.exports = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 0,
    }),
  ],
})

If you need to override the default options passed into css-loader

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      cssLoaderOptions: {
        camelCase: false,
      },
    },
  },
]

install

npm i gatsby-plugin-postcss

Downloadsweekly downloads

10,997

version

2.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability