Import css and sass files nextjs 7

user_9053629 0
Viewed 18574

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
  }
}))
webpack-4 next.js reactjs
4 Answers

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

user_10227260

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;
    }
  }));
user_91106300

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

user_55999140

For those with an external package (in node_modules) here's a Working CSS+SASS solution on next 9.3.0. It involves a standard import of the CSS via SASS. This example uses videojs:

package.json

  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^9.3.0",
    "next-absolute-url": "^1.2.2",
    "node-sass": "^4.13.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "video.js": "^7.7.5"
  },

next.config.js:

const withSass = require("@zeit/next-sass");
module.exports = withSass({
  assetPrefix: process.env.NEXT_BASE_PATH || '',
  exportTrailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
});

component "VideoPlayer.jsx" requiring external CSS

import './VideoPlayer.scss';

VideoPlayer.scss:

@import '~video.js/dist/video-js.css';
user_22087130
Related