Having trouble importing CSS in NextJs

Question

I am having trouble import CSS file in Nextjs code. I have the following CSS file:

./src/components/Layouts.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

In index.js, I have the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from "../src/hoc/Layout/Layout";
import Main from "../src/components/Main/Main";

const Index = () => (
   <Layout>
       <Main />
   </Layout>
);
export default Index

In Layout.js, I have the following code:

import React, { Component } from 'react';

import Aux from '../Aux/Aux';
import './Layout.css';
import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom';
import Header from '../../components/Navigation/Header/Header';
import Footer from "../../components/Footer/Footer";

class Layout extends Component {
    render () {
        return (
            <Aux>
                <Header />
                {this.props.children}
                <Footer />
            </Aux>
        )
    }
}

export default Layout;

I get the error

ModuleParseError: Module parse failed: Unexpected token (10:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| a, abbr,

What I did:

In next-config.js, I added the following:

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
    /* config options here */
})

What am I doing wrong?

|

Have you actually installed @zeit/next-css?

awran5
– awran5

2020-01-08 21:50:57 +00:00
Commented Jan 8, 2020 at 21:50 — awran5
– awran5, Commented Jan 8, 2020 at 21:50

Thanh-Quy Nguyen · Accepted Answer · 2020-06-12 13:30:41Z

1

You don't need next-css anymore (since Next 9.2).

To solve your required loader issue, install the following packages in your terminal:

npm install file-loader --save-dev

npm install url-loader --save-dev

Then replace (or complete) your next.config.js file with the following:

module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

Don't forget to remove any mention of withCSS or next-css, or you may get an error!

edited Jun 12, 2020 at 13:30

answered Jun 12, 2020 at 13:09

Thanh-Quy Nguyen

3,7159 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olavi · Accepted Answer · 2020-01-08 21:12:25Z

0

I think next-css only supports require. Try the following:

require('./Layout.css');

instead of

import './Layout.css';

At least this works in our codebase. Please let me know if this does not help.

answered Jan 8, 2020 at 21:12

Olavi

8594 silver badges13 bronze badges

Collectives™ on Stack Overflow

Having trouble importing CSS in NextJs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related