Menu
I am creating a project with react, redux and next.js, and want to import CSS files in js.
I followed instructions in next.js/#css and next-css, but find out that CSS styles do not work.
My code is as follow:
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" } } Questions:
1. There is an "Uncaught SyntaxError" in Chrome, but it seems to not affect the rendering of the page. But I still wondering the reason and the solution. index.js error in chrome is below img
2. As shown in Chrome, there's no "example" class, which means the style.css file is not loaded. Am I missing anything? no CSS file in chrome
Thanks in advance.
950
Adding global stylesheets: To add a global stylesheet in a Next Js app, basically, the CSS rules which will apply to the entire app, just import the CSS file to the pages/_app. js. For example, we have a CSS file named “style. css” in our “styles” folder.
You can add the css file in head of nextjs. and in the render method, inside the return add a head tag similar to ordinary HTML, the head tag should be inside a div. also the css should be in static folder. Add a key to the link tag to reuse the css in multiple pages.
Next. js has built-in support for CSS and Sass. For this course, we will use CSS.
The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.
EDIT 2: As of Next.js > 10, you can import a global CSS file into _app.js, and you can use CSS modules in your components. More in the Next.js docs.
EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin as dev dependency:
npm install --save-dev @zeit/next-css Then create the next.config.js file in your project root and add the following to it:
// next.config.js const withCSS = require('@zeit/next-css') module.exports = withCSS({/* my next config */}) You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:
// ./index.css div { color: tomato; } Then create the pages folder with an index.js file. Then you can do stuff like this in your components:
// ./pages/index.js import "../index.css" export default () => <div>Welcome to next.js 7!</div> You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.
Deprecated: Next.js < 7:
You'll also need to create a _document.js file in your pages folder and link to the compiled CSS file. Try it out with the following content:
// ./pages/_document.js import Document, { Head, Main, NextScript } from 'next/document' export default class MyDocument extends Document { render() { return ( <html> <Head> <link rel="stylesheet" href="/_next/static/style.css" /> </Head> <body> <Main /> <NextScript /> </body> </html> ) } } The stylesheet is compiled to .next/static/style.css which means that the CSS file is served from /_next/static/style.css, which is the value of the href attribute in the link tag in the code above.
As for the first question, it's probably Chrome not understanding the import syntax. Try to enable the Experimental Web Platform flag in chrome:flags and see if that solves it.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
