У меня возникли проблемы с импортом файла CSS в код Nextjs. У меня есть следующий файл 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 у меня есть следующий код:

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 у меня есть следующий код:

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 я добавил следующее:

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

Что я делаю не так?

|

0
Pota Onasys 31 Дек 2019 в 19:43
1
Вы действительно установили @zeit/next-css?
 – 
awran5
9 Янв 2020 в 00:50

2 ответа

Я думаю, что next-css поддерживает только require. Попробуйте следующее:

require('./Layout.css');

Вместо того

import './Layout.css';

По крайней мере, это работает в нашей кодовой базе. Пожалуйста, дайте мне знать, если это не поможет.

0
Olavi 9 Янв 2020 в 00:12

Вам больше не нужен next-css (начиная с Next 9.2).

Чтобы решить проблему с требуемым загрузчиком, установите в терминал следующие пакеты:

npm install file-loader --save-dev
npm install url-loader --save-dev

База слияния - это коммит, доступный из обоих коммитов. Это более ограничено, чем это: это лучший такой коммит . 2 Может быть более одного «лучшего» коммита, и в этом случае {{X20}} найдет все они. Команда {{X21}} тоже подойдет: каждая из них должна быть исключена с помощью символа префикса {{X22}}.

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, иначе вы можете получить сообщение об ошибке!

0
Thanh-Quy Nguyen 12 Июн 2020 в 16:30