Next.js: import './global.scss' has no effect in _document.js on nextjs 7 ?

Created on 10 Oct 2018  路  6Comments  路  Source: vercel/next.js

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
get helmetBodyAttrComponents() {
return this.props.helmet.bodyAttributes.toComponent();
}

// should render on
get helmetHeadComponents() {
return Object.keys(this.props.helmet)
.filter(el => el !== "htmlAttributes" && el !== "bodyAttributes")
.map(el => this.props.helmet[el].toComponent());
}

get helmetJsx() {
return (
htmlAttributes={{ lang: "en" }}
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 (

rel='stylesheet'
href='/_next/static/style.css'
/>