Hướng dẫn css module nextjs
Examples
Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of
Show Adding a Global StylesheetTo add a stylesheet to your application, import the CSS file within For example, consider the following stylesheet named
Create a
These
styles ( In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state. In production, all CSS files will be automatically
concatenated into a single minified Import styles from node_modulesSince Next.js 9.5.4, importing a CSS file from For global stylesheets, like
For importing CSS required by a third party component, you can do so in your component. For example:
Adding Component-Level CSSNext.js supports CSS Modules using the CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS. CSS Module files can be imported anywhere in your application. For example, consider a reusable First, create
Then, create
CSS Modules are an optional feature and are only enabled for
files with the In production, all CSS Module files will be automatically concatenated into many minified and code-split Sass SupportNext.js allows you to import Sass using both the Before you can use Next.js' built-in Sass
support, be sure to install
Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
Customizing Sass OptionsIf you want to configure the Sass compiler you can do so by using
For example to add
Sass VariablesNext.js supports Sass variables exported from CSS Module files. For
example, using the exported
CSS-in-JSExamples
It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
We bundle styled-jsx to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately do not support server-rendering and are JS-only. See the above examples for other popular CSS-in-JS solutions (like Styled Components). A component using
Please see the styled-jsx documentation for more examples. FAQDoes it work with JavaScript disabled?Yes, if you disable JavaScript the CSS will still be loaded in the production build ( RelatedFor more information on what to do next, we recommend the following sections:
Customizing PostCSS ConfigExtend the PostCSS config and plugins added by Next.js with your own. |