tron-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 possible in next.js projects through babel & webpack.

    This project is similar to what webpack style-loader does but it's 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 example (non-minified)..
                    loader: `babel-loader!next-style-loader`,
                    // Example with `css-loader` to minify CSS
                    // 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:

    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;
    };
    
    export default MyDocument;

    Usage

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

    import styles from './MyComponent.css';
    
    // If you are using `css-loader` with CSS modules,
    // `styles` would be an object containing the generated classnames
    
    const MyComponent extends Component {
        render() {
            return <div>Hello</div>;
        }
    }
    
    export default applyStyles(styles)(MyComponent);

    Enjoy!

    License

    MIT License

    Install

    npm i tron-next-style-loader

    DownloadsWeekly Downloads

    3

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    14.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • tron_npm