Next.js-导入CSS文件不起作用

JavaScript React.js

猪猪

2020-03-20

我正在创建一个带有react,redux和next.js的项目,并想在js中导入CSS文件。

我按照next.js /#cssnext-css中的说明进行操作,但是发现CSS样式无效。

我的代码如下:

pages / index.js:

import React from 'react'
import "../style.css"

class Index extends React.Component {
    render() {
        return (
            <div className="example">Hello World!</div>
        );
    }
}

export default Index

next.config.js:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

style.css:

.example {
    font-size: 50px;
    color: blue;
}

package.json:

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@zeit/next-css": "^0.1.5",
        "next": "^6.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-redux": "^5.0.7",
        "react-scripts": "1.1.4",
        "redux": "^4.0.0",
        "redux-devtools": "^3.4.1"
    },
    "scripts": {
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }
}

问题

1. Chrome中存在“未捕获的SyntaxError”错误,但似乎并不影响页面的呈现。但是我仍然想知道原因和解决方案。chrome中的index.js错误低于img

2.如Chrome中所示,没有“ example”类,这意味着未加载style.css文件。我有什么想念的吗?chrome中没有CSS文件

提前致谢。

第2531篇《Next.js-导入CSS文件不起作用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android