Import css files from node modules in Next JS?

问题

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.

回答1:

This is the solution you are probably looking for:

3 simple steps:

Install next-css plugin:

npm install --save @zeit/next-css

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

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

回答2:

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';

来源：https://stackoverflow.com/questions/45192088/import-css-files-from-node-modules-in-next-js

标签

reactjs

styled-components

next.js