@zeit/next-css
Import `.css` files in your Next.js project
Last updated 2 years ago by timneutkens .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @zeit/next-css 
SYNC missed versions from official npm registry.

Next.js + CSS

Import .css files in your Next.js project

Installation

npm install --save @zeit/next-css

or

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>

Note: CSS files can not be imported into your _document.js. You can use the _app.js instead or any other page.

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.

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
  }
})

Current Tags

  • 0.2.1-canary.4                                ...           canary (2 years ago)
  • 1.0.1                                ...           latest (2 years ago)

19 Versions

  • 0.2.1-canary.4                                ...           2 years ago
  • 1.0.2-canary.2                                ...           2 years ago
  • 1.0.2-canary.0                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 0.2.1-canary.3                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.2.1-canary.2                                ...           2 years ago
  • 0.2.1-canary.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
Downloads
Today 313
This Week 973
This Month 5,515
Last Day 355
Last Week 1,542
Last Month 7,220
Dependencies (6)
Dev Dependencies (1)
Dependents (203)

Copyright 2014 - 2017 © taobao.org |