0.3.1 • Published 8 years ago
next-style-loader v0.3.1
next-style-loader
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!