Narnia's Psychedelic Mushrooms

    next-css-modules

    0.1.1 • Public • Published

    Next.js + CSS

    Import .css files in your Next.js project

    Installation

    npm install --save next-css-modules
    

    or

    yarn add next-css-modules
    

    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('next-css-modules');
    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('next-css-modules');
    module.exports = withCSS();

    Create a CSS file style.module.css

    .example {
        font-size: 50px;
    }

    Create a page file pages/index.js

    import css from '../style.module.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('next-css-modules');
    module.exports = withCSS({
        cssLoaderOptions: {
            importLoaders: 1,
            localIdentName: '[local]___[hash:base64:5]'
        }
    });

    Create a CSS file styles.module.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 '../styles.module.css';
     
    const Component = props => {
        return <div className={css.example}>...</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('next-css-modules');
    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('next-css-modules');
    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('next-css-modules');
    module.exports = withCSS({
        webpack(config, options) {
            return config;
        }
    });

    Keywords

    none

    Install

    npm i next-css-modules

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    10.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • nopbongdem