Having trouble importing CSS in NextJs

问题

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?

回答1:

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.

回答2:

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!

来源：https://stackoverflow.com/questions/59546601/having-trouble-importing-css-in-nextjs

标签

reactjs

next.js