❤
npm
Sign UpSign In

This package has been deprecated

Author message:

No longer maintained.

next-style-loader

0.3.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i next-style-loader

Repository

github.com/moxystudio/next-style

Homepage

github.com/moxystudio/next-style

Weekly Downloads

937

Version

0.3.1

License

MIT

Last publish

Collaborators

  • tiagodinis
  • moxyhq
  • filipediasf
  • satazor
  • marcooliveira
  • acostalima
  • andregoncalvesdev
Try on RunKit
Report malware