Note: this is a fork of moxystudio/next.js-style-loader, which is no longer maintained
Makes loading of CSS files possible in next.js projects through babel & webpack.
This module is similar to what webpack style-loader does but it's compatible with next.js.
$ npm install --save-dev next-style-loader
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;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!