gatsby-plugin-css-customs
Gatsby plugin that implements css-customs-loader
Last updated a year ago by silvenon .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gatsby-plugin-css-customs 
SYNC missed versions from official npm registry.

gatsby-plugin-css-customs

Implements css-customs-loader in Gatsby.

Use CSS Modules!

Due to how Gatsby configures webpack rules for CSS in SSR stage, you have to put customs in a .module.css file, which uses CSS Modules. I could technically hack my way around this requirement, but it would be going against the grain and be unnecessarily fragile.

Configuration

Add the plugin to gatsby-config.js after gatsby-plugin-postcss and any other Gatsby plugins that modify CSS webpack rules:

yarn add gatsby-plugin-postcss gatsby-plugin-css-customs
module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...other CSS plugins
    'gatsby-plugin-css-customs',
  ],
}

gatsby-plugin-css-customs detects any valid PostCSS configuration (including options passed to gatsby-plugin-postcss!), so let's create one. importFrom will point to a global.module.css file containing our customs and, for the sake of this example, we'll enable all features related to CSS customs:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      importFrom: 'src/global.module.css',
      features: {
        'custom-properties': true, // already enabled by default
        'custom-media-queries': true,
        'custom-selectors': true,
      },
    },
  },
}

Usage

See usage instructions in the main readme, but use global.module.css instead of global.css.

Current Tags

  • 0.4.0                                ...           latest (a year ago)

4 Versions

  • 0.4.0                                ...           a year ago
  • 0.3.0                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 0
Dependencies (3)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |