next-style-loaderdeprecated

Makes loading of CSS files possibles innext.js projects through webpack & babel

Usage no npm install needed!

<script type="module">
  import nextStyleLoader from 'https://cdn.skypack.dev/next-style-loader';
</script>

README

next-style-loader

NPM version Downloads Build Status Dependency status Dev Dependency status

Makes loading of CSS files possibles in next.js projects through babel & webpack.

This project is similar to what webpack style-loader does but is compatible with next.js.

Installation

$ npm install --save-dev next-style-loader

Setup

First you will need to create a next.config.js file:

module.exports = {
    webpack: (config, { dev }) => {
        config.module.rules.push(
            {
                test: /\.css$/,
                loader: 'emit-file-loader',
                options: {
                    name: 'dist/[path][name].[ext]',
                },
            },
            {
                test: /\.css$/,
                // Simplest way (non-minified)..
                loader: `babel-loader!next-style-loader`,
                // Use `css-loader` to minify and enable source maps
                // NOTE: The `url` option from the css loader must be disabled; images, fonts, etc should go into /static
                loader: `babel-loader!next-style-loader!css-loader?sourceMap&minimize=${!dev}&url=false`,
                // Same as above but with CSS modules
                loader: `babel-loader!next-style-loader!css-loader?sourceMap&minimize=${!dev}&url=false&modules`,
                // Example with `css-loader` and `postcss-loader' (you may also activate CSS modules just like above)
                // Enable `postcss-imports` plugin must be enabled in the `postcss.config.js` file to process @import declarations
                loader: `babel-loader!next-style-loader!css-loader?sourceMap&minimize=${!dev}&url=false!postcss-loader`,
                // Example with `css-loader` and `sass-loader'
                loader: 'babel-loader!next-style-loader!css-loader?sourceMap&minimize=${!dev}&url=false!sass-loader',
            }
        );

        return config;
    },
};

Finally, create a pages/_document.js file:

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { flush } from 'next-style-loader/applyStyles';

export default class MyDocument extends Document {
    render() {
        const { nextStyle } = this.props;

        return (
            <html>
                <Head>
                    { nextStyle.tag }
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}

MyDocument.getInitialProps = function (ctx) {
    const props = Document.getInitialProps(ctx);

    props.nextStyle = flush();

    return props;
};

Usage

After setting the project, you may import CSS files like so:

import styles from './MyComponent.css';

const MyComponent extends Component {
    render() {
        return <div>Hello</div>;
    }
}

export default applyStyles(styles)(MyComponent);

Enjoy!

License

MIT License