Import css files from node modules in Next JS?

Question

I am very new to next.js. Using it for the server side rendering of my application.

According to the documentation you can import css files from a static folder which should be in root directory but i want to import css from node_modules because i have extended bootstrap and created my own package.

Hesper

Answer 1

This is the solution you are probably looking for:

3 simple steps:

1. Install next-css plugin:

npm install --save @zeit/next-css

2. Create in your root directory next.config.js with the following content:

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

3. Now you should be able to import styleshets from node_modules like this:

import 'bootstrap-css-only/css/bootstrap.min.css';

Note: Using Next v 8+

Other solutions are workarounds from before next-css was available, but as shown above, there is a simple and supported solution now. It was provided by one of the core team members: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Haland

This is the correct answer. Unfortunately, I realized this > 10 minutes after I downvoted, and SO has a ridiculous rule preventing me from changing my vote unless it's edited. – Rudnick

I don't see the edit and am still unable to change my vote unfortunately. I proposed an edit as well in case yours isn't accepted. – Rudnick

Answer 2

Since Nextjs 9.5.4, you can now import the css file directly from node_modules into the component where you need it (not required to be in _app.js). Just like this

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

See docs here for more info - https://nextjs.org/docs/basic-features/built-in-css-support. All the best.

Cubeb

Answer 3

Use @webdeb/next-styles instead of @zeit/next-css.Then you can normally import any node module style.

    const withStyles = require('@webdeb/next-styles')

    module.exports = withStyles({
      sass: true, // use .scss files
      modules: true, 
    })

Absorbing

Answer 4

Since Next.js 9.2, there is no more need to use next-css and withCSS or withStyle. Next.js natively handles CSS imports. Since these may come with Webpack issues (see this issue: Having trouble importing CSS in NextJs), here's the way to configure loaders with webpack. In your terminal:

npm install file-loader --save-dev

npm install url-loader --save-dev

Then replace (or complete) your next.config.js file with the following:

module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

Don't forget to remove any mention of withCSS, withStyle or next-css since they may cause some errors to happen.

Burmaburman

This explains how to install some stuff, but doesn't explain how to use it. What does the require / import look like? – Tlaxcala

Answer 5

UPDATE : if you have any problem importing normal css into your components follow this example.

beside that there is no difference. if you are importing from static folder the address is something like:

import stylesheet from '../static/css/index.css'

now if you want to import css from a node module (for example rc-slider package), it will be:

import rcstyle from 'rc-slider/assets/index.css';

Bougainville

No you cant import in this way you need to look at next js documentation. – Hesper

have a look at this issue github.com/zeit/next.js/issues/299#issuecomment-316400292 – Hesper

I thought you had no problem in importing css files. now just use wrap-in-js babel plugin and after importing css files inject them in your jsx as follows: <style dangerouslySetInnerHTML={{__html: importedcssfile}}/> – Bougainville

@dev123 you can also follow this example, it explains whatever you need to set up what I told you about : example with global styles – Bougainville

Answer 6

For adding node_modules/ prefix helped:

// Old
import "@splidejs/react-splide/dist/css/themes/splide-default.min.css";

// New
import "node_modules/@splidejs/react-splide/dist/css/themes/splide-default.min.css";

Senghor

Do you have version numbers for the old or new code? – Tlaxcala