Next js css loader

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Import `.css` files in your Next.js project. A @zeit/next-css fork to solve several anti-pattern issues.

License

kaelzhang/next-css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Import .css files in your Next.js project

This is a @zeit/next-css FORK which:

• uses require.resolve to get dependency *-loader so that there won’t be environment issues
• is tested.
• fixes peer dependencies
• supports options only for @ostai/next-css plugin

The stylesheet is compiled to .next/static/css . Next.js will automatically add the css file to the HTML. In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.

const withCSS = require('@ostai/next-css')

Create a next.config.js in the root of your project (next to pages/ and package.json)

// next.config.js module.exports = withCSS()

Create a CSS file style.css

Create a page file pages/index.js

import "../style.css" export default () => div className="example">Hello World!/div>

Note: CSS files can not be imported into your _document.js . You can use the _app.js instead or any other page.

// next.config.js module.exports = withCSS( cssModules: true >)

Create a CSS file style.css

Create a page file pages/index.js

import css from "../style.css" export default () => div className=css.example>>Hello World!/div>

const withPlugins = require('next-compose-plugins') module.exports = withPlugins([ withCSS ],  . nextConfig >)

With specific css-loader path

const withPlugins = require('next-compose-plugins') module.exports = withPlugins([ withCSS.options( cssLoaderPath: require.resolve('/path/to/css-loader') >) ],  . nextConfig >)

• options? Object
  • postCssLoaderPath? path the require.resolve() d main entry of postcss-loader
  • cssLoaderPath? path the main entry of css-loader
  • ignoreLoaderPath? path the main entry of ignore-loader

  Create a new withCSS plugin with preset options.

  With CSS modules and options

  You can also pass a list of options to the css-loader by passing an object called cssLoaderOptions .

  // next.config.js module.exports = withCSS( cssModules: true, cssLoaderOptions:  importLoaders: 1, localIdentName: "[local]___[hash:base64:5]", > >)

  Create a CSS file styles.css

  Create a page file pages/index.js that imports your stylesheet and uses the hashed class name from the stylesheet

  import css from "../style.css" const Component = props =>  return ( div className=css.example>> . /div> ) > export default Component

  Your exported HTML will then reflect locally scoped CSS class names.

  Create a next.config.js in your project

  // next.config.js module.exports = withCSS()

  module.exports =  plugins:  // Illustrational 'postcss-css-variables': > > >

  Create a CSS file style.css the CSS here is using the css-variables postcss plugin.

  :root < --some-color: red; > .example < /* red */ color: var(--some-color); >

  When postcss.config.js is not found postcss-loader will not be added and will not cause overhead.

  You can also pass a list of options to the postcss-loader by passing an object called postcssLoaderOptions .

  For example, to pass theme env variables to postcss-loader, you can write:

  // next.config.js module.exports = withCSS( postcssLoaderOptions:  parser: true, config:  ctx:  theme: JSON.stringify(process.env.REACT_APP_THEME) > > > >)

  Optionally you can add your custom Next.js configuration as parameter

  // next.config.js module.exports = withCSS( webpack(config, options)  return config > >)

  Источник

  Saved searches

  Use saved searches to filter your results more quickly

  You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

  Loader for using CSS modules in Next.js

  ScottPolhemus/next-css-loader

  This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

  Name already in use

  A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

  Sign In Required

  Please sign in to use Codespaces.

  Launching GitHub Desktop

  If nothing happens, download GitHub Desktop and try again.

  Launching GitHub Desktop

  If nothing happens, download GitHub Desktop and try again.

  Launching Xcode

  If nothing happens, download Xcode and try again.

  Launching Visual Studio Code

  Your codespace will open once ready.

  There was a problem preparing your codespace, please try again.

  Latest commit

  Git stats

  Files

  Failed to load latest commit information.

  README.md

  Enables the use of css modules in a next.js app, similar to the usage of style-loader?singleton .

  This package has two exports: the next-css-loader webpack loader (intended to be used with postcss-loader and postcss-modules ), and a component which will add an inline style tag to Next’s .

  In an existing next.js app, add the loader (and postcss dependencies):

  npm install --save-dev next-css-loader postcss-loader postcss-modules 

  In next.config.js, add the loader rules:

  module.exports = < webpack: (config) => < config.module.rules.push( < test: /\.css$/, use: [ < loader: 'emit-file-loader', options: < name: 'dist/[path][name].[ext]' >>, 'next-css-loader', 'postcss-loader' ] > ); return config; > >; 

  In postcss.config.js, add configuration for postcss and postcss-modules:

  In your app container or page layout component, add the stylesheet component (only needs to be rendered once):

  impot React from 'react'; import Stylesheet from 'next-css-loader/stylesheet'; export default class App extends React.Component < render() <  > > 

  About

  Loader for using CSS modules in Next.js

  Источник

  CSS Modules

  Next.js has built-in support for CSS Modules using the .module.css extension.

  CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS.

  Example

  For example, consider a reusable Button component in the components/ folder:

  First, create components/Button.module.css with the following content:

  /* You do not need to worry about .error <> colliding with any other `.css` or `.module.css` files! */ .error  color: white; background-color: red; >

  Then, create components/Button.js , importing and using the above CSS file:

  import styles from './Button.module.css' export function Button()  return (  button type="button" // Note how the "error" class is accessed as a property on the imported // `styles` object. className=styles.error>  >  Destroy  button>  ) >

  CSS Modules are an optional feature and are only enabled for files with the .module.css extension. Regular stylesheets and global CSS files are still supported.

  In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

  Global Styles

  To add a stylesheet to your application, import the CSS file within pages/_app.js .

  For example, consider the following stylesheet named styles.css :

  body  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 20px 20px 60px; max-width: 680px; margin: 0 auto; >

  Create a pages/_app.js file if not already present. Then, import

  import '../styles.css' // This default export is required in a new `pages/_app.js` file. export default function MyApp(< Component, pageProps >)  return Component . pageProps> /> >

  These styles ( styles.css ) will apply to all pages and components in your application. Due to the global nature of stylesheets, and to avoid conflicts, you may only import them inside pages/_app.js .

  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 .css file. The order that the CSS is concatenated will match the order the CSS is imported into the _app.js file. Pay special attention to imported JS modules that include their own CSS; the JS module’s CSS will be concatenated following the same ordering rules as imported CSS files. For example:

  import '../styles.css' // The CSS in ErrorBoundary depends on the global CSS in styles.css, // so we import it after styles.css. import ErrorBoundary from '../components/ErrorBoundary' export default function MyApp(< Component, pageProps >)  return (  ErrorBoundary>  Component . pageProps> />  ErrorBoundary>  ) >

  External Stylesheets

  Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import

  Import styles from node_modules

  Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

  For global stylesheets, like bootstrap or nprogress , you should import the file inside pages/_app.js . For example:

  import 'bootstrap/dist/css/bootstrap.css' export default function MyApp(< Component, pageProps >)  return Component . pageProps> /> >

  For importing CSS required by a third-party component, you can do so in your component. For example:

  import from 'react' import from '@reach/dialog' import VisuallyHidden from '@reach/visually-hidden' import '@reach/dialog/styles.css' function ExampleDialog(props)  const [showDialog, setShowDialog] = useState(false) const open = () => setShowDialog(true) const close = () => setShowDialog(false) return (  div>  button onClick=>Open Dialogbutton>  Dialog isOpen= onDismiss=>  button className="close-button" onClick=>  VisuallyHidden>CloseVisuallyHidden>  span aria-hidden>×span>  button>  p>Hello there. I am a dialogp>  Dialog>  div>  ) >

  Additional Features

  Next.js includes additional features to improve the authoring experience of adding styles:

  • When running locally with next dev , local stylesheets (either global or CSS modules) will take advantage of Fast Refresh to instantly reflect changes as edits are saved.
  • When building for production with next build , CSS files will be bundled into fewer minified .css files to reduce the number of network requests needed to retrieve styles.
  • If you disable JavaScript, styles will still be loaded in the production build ( next start ). However, JavaScript is still required for next dev to enable Fast Refresh.

  Источник