25

I am creating a React app using Next.js and am trying to use components provided by reactstrap.

The issue I seem to be running into seems to involve importing the CSS file named bootstrap/dist/css/bootstrap.min.css as the reactstrap guide says to do.

The error I am seeing is Error in bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.

Does anyone know what I have to do to make this work correctly? I am a new web developer so sorry if I am missing anything obvious.

Thanks!

mtl
  • 7,529
  • 2
  • 20
  • 22
gsapienza
  • 283
  • 1
  • 3
  • 7

3 Answers3

35

EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin:

npm install --save @zeit/next-css

Then create the next.config.js file in your project root and add the following to it:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:

// ./index.css
div {
    color: tomato;
}

Then create the pages folder with an index.js file. Then you can do stuff like this in your components:

// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>

You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.


Next.js < version 7

Next.js doesn't come with CSS imports by default. You'll have to use a webpack loader. You can read about how this works here: https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules.

Next.js also has plugins for CSS, SASS and SCSS. Here is the plugin for CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css. The documentation for that plugin makes it fairly simple:

  1. You create the _document file in pages/.
  2. You create the next.config.js file in the root.

Using the code snippets from the documentation should set you up to import CSS files.

You'll need at least version 5.0. You can make sure you have the latest Next.js installed: npm i next@latest.

mtl
  • 7,529
  • 2
  • 20
  • 22
  • Would you please tell me how to solve this problem? Because I followed this rule but I have an error! Thank you – Hamed May 07 '19 at 10:55
  • 1
    Hi @Hamed, comments are used to ask for clarification or to point out problems in the post, so I cannot help you here, in the comments section. If you need to solve an issue with your code you can always open up a new question, wherein you describe the problem you are having and include any error messages you are getting. There are lots and lots of people ready to help, so don't be afraid to ask :). – mtl May 07 '19 at 16:02
  • 1
    Sure! Thank you for inform me. I fount a solution and it was a little changing in **css-loader-config.js** file! this line should comment out : **// minimize: !dev** – Hamed May 08 '19 at 15:11
  • I personally added the `import` css file from my layout, which is itself imported from my `pages/_app.tsx`, this way it's automatically included in every page. I'm still lost regarding what to do with Popper and TransitionGroup libs, the docs are kinda bad. – Vadorequest Nov 07 '19 at 14:01
  • Thanks for the answer what does this mean? withCSS({/* my next config */}) not sure what "my next config" means in this context. @mtl – FabricioG Feb 27 '20 at 01:56
  • @FabricioG, you are in the `next.config.js` file, and `{/* my next config */}` is where you write your configuration options. – mtl Feb 27 '20 at 09:30
6

If you are still getting the error:

Unexpected token (6:3) You may need an appropriate loader to handle this file type. 

try this in your next.config.js:

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

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})
  1. 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+

Background: I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution.

It was provided by one of the core team members

tomerpacific
  • 4,704
  • 13
  • 34
  • 52
Greg Tomasik
  • 440
  • 6
  • 9
  • +1 This worked for me when I tried adding in a webpack compiled css file. Just letting anyone else know if they are running into the same issue. – designtocode Aug 30 '19 at 07:54
1

Next.js 9.3 and above

As of Next.js 9.3 you can now directly import SCSS files as global stylesheets. Read more about next.js built-in SASS support here.

npm install sass reactstrap bootstrap

Index.scss

@import '~node_modules/bootstrap/scss/bootstrap';
Jeremy Lynch
  • 6,780
  • 3
  • 52
  • 63