@zeit/next-css NPM

Next.js + CSS

Import .css files in your Next.js project

Installation

npm install --save @zeit/next-css

yarn add @zeit/next-css

Usage

The stylesheet is compiled to .next/static/css. Next.js will automatically add the css file to the HTML. In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.

Without CSS modules

Create a next.config.js in the root of your project (next to pages/ and package.json)

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Create a CSS file style.css

.example {
  font-size: 50px;
}

Create a page file pages/index.js

import "../style.css"

export default () => <div className="example">Hello World!</div>

With CSS modules

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: true
})

Create a CSS file style.css

.example {
  font-size: 50px;
}

Create a page file pages/index.js

import css from "../style.css"

export default () => <div className={css.example}>Hello World!</div>

With CSS modules and options

You can also pass a list of options to the css-loader by passing an object called cssLoaderOptions.

For instance, to enable locally scoped CSS modules, you can write:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  }
})

Create a CSS file styles.css

.example {
  font-size: 50px;
}

Create a page file pages/index.js that imports your stylesheet and uses the hashed class name from the stylesheet

import css from "../style.css"

const Component = props => {
  return (
    <div className={css.backdrop}>
      ...
    </div>
  )
}

export default Component

Your exported HTML will then reflect locally scoped CSS class names.

For a list of supported options, refer to the webpack css-loader README.

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

PostCSS plugins

Create a next.config.js in your project

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Create a postcss.config.js

module.exports = {
  plugins: {
    // Illustrational
    'postcss-css-variables': {}
  }
}

Create a CSS file style.css the CSS here is using the css-variables postcss plugin.

:root {
  --some-color: red;
}

.example {
  /* red */
  color: var(--some-color);
}

When postcss.config.js is not found postcss-loader will not be added and will not cause overhead.

You can also pass a list of options to the postcss-loader by passing an object called postcssLoaderOptions.

For example, to pass theme env variables to postcss-loader, you can write:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  postcssLoaderOptions: {
    parser: true,
    config: {
      ctx: {
        theme: JSON.stringify(process.env.REACT_APP_THEME)
      }
    }
  }
})

Configuring Next.js

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  webpack(config, options) {
    return config
  }
})

find-up css-loader ignore-loader postcss-loader extract-css-chunks-webpack-plugin optimize-css-assets-webpack-plugin

@sprucelabs/spruce-skill next-contour myxd dafun zenstate flok afew-live-editor gintonic nextjs-setup nextjs-speed-test components-for-streaming next-skeleton deneme-button-deneme cirplus-frontend pops-app-sstv pops-kids-sstv pops-plus-web spotto-locations @brudi/brudi-toolbox-next flavory-ui @agungkes/next-sass lnd-web-ho @sotah-inc/next-local-dev shopify-better-exporter todoist-landing-pages @infinitebrahmanuniverse/nolb-_zei @everything-registry/sub-chunk-1072 @steersman/next-sass tc-site-builder tc-site-builder-beta syom terampilalpha windbreaker-next with-apollo with-redux web-whitelabel web-styleguide-next speedruns @conveyal/taui @calblueprint/whales jamplay-mongoose-elastic jam-plugin james-ui-custom kidjs 4m-clean-shopify-app sunil-bagde.github.io streamchamp-components soya-next-scripts uber-next ua-front uepay-ops uepay-ops-no-auth tsx-docs @akouryy/next-less @brudi-toolbox/next @burak101/agency @brisk-docs/website @2012mjm/next-sass @36node/template-nextjs @adhitiadarmawan/tmcomponents @economist/design-system @hashicorp/next-hashicorp @etidbury/ts-next-helpers @getgood/build-your-own-sinatra @kyso/react-jupyter @mschoening/next-sass @newstudios/next-less-loader @mies-co/next-ant @mkplace/catalog-next @jacinthjs/jacinth-dev @ilb/filedossier-js @jeremybanks/speedruns @jsweb001/blog_blue_theme_01 @jsweb001/blog_blue_theme_02 @jsweb001/blog_carbon_white_theme @jsweb001/blog_gray_theme_01 @jsweb001/blog_gray_theme_02 @jsweb001/blog_green_theme_02 @jsweb001/blog_white_theme_01 @jsweb001/company_profile_light_blue_theme @jsweb001/school_green_theme_light_dashed @jsweb001/school_white_theme_light @jsweb001/school_white_theme_light_dashed @quancheng/valkyriejs @proerd/nextpress @reactseals/renative-template-chat @rn-debugger/server @opendocs-editor/3ditor @sprucelabs/sprucebot-skills-kit @rohandang/bolts my-nextron-app mixin-venuee myui-react myxd-npmtest ooniprobe-desktop rn-noname rn-noname-test react-booking sapien-v2-frontend react-inline-worker

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago