Import css and sass files nextjs 7

nextjs css modules sass
next js bootstrap sass
next js built in css
next js static files
next js external css
styled-jsx sass import
next-compose-plugins
next js import css from node_modules

I want be able to import in any file in my project the two types of files.

    import 'styles/index.scss';
    import 'styles/build/_style.css'

Its important to note im using Nextjs 7 and webpack 4 (comes with nextjs7)

In Nextjs 6 we used to use in next.config.js

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')

const commonsChunkConfig = (config, test = /\.css$/) => {
  config.plugins = config.plugins.map(plugin => {
      if (
          plugin.constructor.name === 'CommonsChunkPlugin' &&
          plugin.minChunks != null
  ) {
      const defaultMinChunks = plugin.minChunks;
      plugin.minChunks = (module, count) => {
          if (module.resource && module.resource.match(test)) {
              return true;
          }
          return defaultMinChunks(module, count);
      };
  }
  return plugin;
  });
  return config;
};

module.exports = withCSS(withSass({
  webpack: (config, { isServer }) => {
      config = commonsChunkConfig(config, /\.(sass|scss|css)$/)
      return config
  }
}))

UDDATE March 2020

Nextjs v9.3 Add support for sass as well. More info here

UPDATE January 2020

Nextjs v9.2 Added native support for CSS. More info on official docs

To get started using CSS imports in your application, import the CSS file within pages/_app.js.

Since stylesheets are global by nature, they must be imported in the Custom component. This is necessary to avoid class name and ordering conflicts for global styles.

If you are currently using @zeit/next-css we recommend removing the plugin from your next.config.js and package.json, thereby moving to the built-in CSS support upon upgrading.


This basic example works for me with having next-sass and next-css side by side

/next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass());

/pages/index.js

import '../styles.scss';
import '../styles.css';

export default () => {
  return (
    <div className="example-sass">
      <h1 className="example-css">Here I am</h1>
    </div>
  );
};

/styles.css

.example-css {
  background-color: #ccc;
}

/styles.scss

$font-size: 50px;

.example-sass {
  font-size: $font-size;
}

/package.json

"dependencies": {
  "@zeit/next-css": "^1.0.1",
  "@zeit/next-sass": "^1.0.1",
  "next": "^7.0.2",
  "node-sass": "^4.10.0",
  "react": "^16.6.3",
  "react-dom": "^16.6.3"
}

Here is what I see on the screen

Hope this helps!

PS there is some info on official GitHub repo as well

Next.js style with Sass, Next.js is very popular server side rendering react framework. application with next.js you can use the same template as create-next-app and write your own css in your js files. Then you can use your scss file in your components as import "..​/styles/styles.scss" 7 Obvious Reasons to Use TypeScript. 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. Sass Support. Next.js allows you to import Sass using both the .scss and .sass extensions.

Use the next-compose-plugins.

It provides a cleaner API for creating next.js configurations, you DONT need to install @zeit/next-css and you ALSO DON'T have to do any webpack loader configuration to make it work.

Here is an example with the @zeit/next-source-maps plugin for demo purposes:

/* Import modules */
const withSourceMaps = require( '@zeit/next-source-maps' );
const withSass = require( '@zeit/next-sass' );
const withPlugins = require( 'next-compose-plugins' );

/* Configuration */
const NextAppConfig = ({
  // config stuff goes here, no webpack loader config required
})

/* Export declaration */
module.exports = withPlugins([ 
  [ withSourceMaps ],  
  [ withSass ]
], NextAppConfig );

I prefer to declare the array before the export because it is even cleaner setup:

// ... imports go here

/* Plugins array variable */
var plugins = [ [ withSourceMaps ], [ withSass ] ];

/* CONFIGURATION */
const NextAppConfig = ({
  // Config stuff goes here, no webpack configuration required
})

/* EXPORT DECLARATION */
module.exports = withPlugins( plugins, NextAppConfig );

https://github.com/cyrilwanner/next-compose-plugins

import './global.scss' has no effect in _document.js on nextjs 7 , import './global.scss' has no effect in _document.js on nextjs 7 ? #5425 Note: CSS files can not be imported into your _document.js. You can  @zeit/next-css, @zeit/next-less, @zeit/next-sass, and @zeit/next-stylus are now powered by mini-extract-css-plugin. The new version of these Next.js plugins solves 20 existing issues related to CSS imports; As an example, importing CSS in dynamic import()s is now supported:

I initialized my project like this includes SCSS CSS PNG SVG TTF.

 npm install withSass@canary withCSS@canary node-sass

//next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
webpack (config, options) {
   config.module.rules.push({
       test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
       use: {
           loader: 'url-loader',
           options: {
               limit: 100000
           }
       }
   });

    return config;
    }
  }));

[RFC] CSS Support · Issue #8626 · zeit/next.js · GitHub, The @zeit/next-css/sass/less/stylus plugins will be deprecated in favor of AMP: styles missing when importing standard css files in a project  Interesting that the README file has been updated to remove the SVG loader example and changed to say adding loaders for file like SVG, CSS and SASS is discouraged. I'm not sure why inlined CSS is OK but imported CSS isn't but I'm sure there's a good reason why.

The simple way to use Scoped and Global SCSS in Next.js, Although it has a default way of styling called CSS in JS, I preferer Create React App approach. When you can write SASS/SCSS styles in separate files and scope it to the file or make it Or import filname.global.scss to use global styles into a component. The 7 best features of React over the last 7 years. If anyone is still having this issue one solution that works great that I see people are overlooking is by simply using SASS in the next.config.js then importing the CSS files via the CSS @import. Here's an example

The Simplest Way To CONFIGURE NEXT.JS With SASS, Next-sass compiled stylesheet to .next/static/css. Next.js will automatically add the CSS to your HTML files. Step 1: Install Dependencies. Let's  Import-Only Files. Configuring Modules Through Imports. Loading a Module That Contains Imports. Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together.

Blog, CSS, LESS, SASS, SCSS and CSS Modules. One of our most highly requested features is the ability to import CSS files and take advantage of  Next.js style with Sass — SCSS & Fonts import css from "../styles.scss" export Since nextjs is server rendered framework we should load the fonts as same way we did for scss and sass files.

Comments
  • the easiest solution is to rename _style.css into _style.scss and use sass loader. Why doesn't it work for you? :)
  • the problem is that there are some packages that has it own style.css and i just need to import it not change the package core.
  • ok i see. I added an example setup that work for me.
  • Greate! i just had to update my css/sass/next dependencys and works! Thank you
  • Any idea how I can deploy this to zeit-now? What should I put into now.json? Thanks
  • I just tried and see that there is some issue with deploying next/css and next/sass to now v2. Here is an issue I face as well github.com/zeit/next.js/issues/5750#issuecomment-443562606
  • facing this issue constantly, TypeError: Cannot read property 'local' of undefined