在NextJs中导入CSS时遇到问题 [英] Having trouble importing CSS in NextJs

问题描述

我无法在Nextjs代码中导入CSS文件.我有以下CSS文件:

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

./src/components/Layouts.css

./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;
}

在index.js中，我有以下代码:

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

在Layout.js中，我有以下代码:

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;

我收到错误

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, 

我做了什么:

在next-config.js中，我添加了以下内容:

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

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

我在做什么错了?

|

推荐答案

您不再需要next-css(从Next 9.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

然后用以下内容替换(或完成)您的next.config.js文件:

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;
    },
};

别忘了删除任何提及withCSS或next-css的内容，否则您可能会收到错误消息！

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

这篇关于在NextJs中导入CSS时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！