Testing out Next.js 7, and trying to understand how to include a global stylesheet.
In my _document.js js, I've tried import './index.scss'; but there's no effect, even after a server restart. I need global styling in my ap. What's wrong in my configuration ? I nee
This is my configuration
next.config.js
```javascript
// next.config.js
const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");
module.exports = withSass(
withCss({
webpack: (config, { dev }) => {
if (dev) {
config.module.rules.push({
test: /.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// eslint options (if necessary)
}
});
}
return config;
}
})
);
````
_document.js
````javascript
/* eslint-disable */
import Document, { Head, Main, NextScript } from "next/document";
import Helmet from "react-helmet";
import antdstyle from "antd/dist/antd.min.css";
import stylesheet from "~/styles/index.scss";
export default class extends Document {
static async getInitialProps(...args) {
const documentProps = await super.getInitialProps(...args);
// see https://github.com/nfl/react-helmet#server-usage for more information
// 'head' was occupied by 'renderPage().head', we cannot use it
return { ...documentProps, helmet: Helmet.renderStatic() };
}
// should render on
get helmetHtmlAttrComponents() {
return this.props.helmet.htmlAttributes.toComponent();
}
// should render on
// should render on
get helmetJsx() {
return (
title="%s | My App"
meta={[
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ property: "og:title", content: "Hello next.js!" }
]}
/>
);
}
/*
In production the stylesheet is compiled to .next/static/style.css.
The file will be served from /_next/static/style.css
You could include it into the page using either next/head or a custom _document.js.
*/
render() {
return (
I fixing with add _app.js inside pages folder and import global style in _app.js
_app.js
````javascript
import App, { Container } from "next/app";
import React from "react";
import "~/styles/index.scss";
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
);
}
}
````
Just for reference:
Note: CSS files can not be imported into your _document.js. You can use the _app.js instead or any other page.
https://github.com/zeit/next-plugins/tree/master/packages/next-css
This is how they're doing it in the official examples here:
https://github.com/zeit/next.js/blob/master/examples/with-next-sass/pages/_document.js
As far I understand, the docs are talking about the import directive, not the HTML tag.
Any idea, how to get styled-components to work Next.js. Haven't found any example on that ...
Most helpful comment
https://github.com/zeit/next.js/tree/canary/examples/with-styled-components