I want to add CSS loader to my Nuxt.js project by adding what follows (as mentioned in the documentation link) webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

I also read on the Nuxt.js official documentation how to extend webpack.config.js for a Nuxt.js application by simply modifying the nuxt.config.js file as follows:

module.exports = {
  build: {
     extend (config, { isDev, isClient }) {
       // ...
     }
  }
}

But when I open nuxt.config.js, I find this snippet in place:

extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        })
      }
    }

Given these information ( and my limited knowledge of settings this stack to which I am new), I did this -which seems to work:

extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          test: /\.css$/,
          loader: 'eslint-loader',
          loader: 'stylus-loader',
          loader: 'css-loader',
          exclude: /(node_modules)/,
        })
      }
    }

When I run my project: npm run dev, all is Ok; this is also fine when I refresh my page, but I noticed whenever I open the developments tools in Chrome and I referesh the page, I get this error:

nuxt:render Rendering url /material-design-icons.css.map +225ms
{ statusCode: 404,
  path: '/material-design-icons.css.map',
  message: 'This page could not be found' }

The problem is that I already installed what Nuxt is plaining about:

npm install material-design-icons-iconfont --save

I also installed the css-stylus and stylus-loader using npm.

I want to let you know that I am importing these icon fonts in my_project/store/index.js:

import 'material-design-icons-iconfont/dist/material-design-icons.css'

How can I fix this?

I want to add CSS loader to my Nuxt.js project by adding what follows (as mentioned in the documentation link) webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

I also read on the Nuxt.js official documentation how to extend webpack.config.js for a Nuxt.js application by simply modifying the nuxt.config.js file as follows:

module.exports = {
  build: {
     extend (config, { isDev, isClient }) {
       // ...
     }
  }
}

But when I open nuxt.config.js, I find this snippet in place:

extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        })
      }
    }

Given these information ( and my limited knowledge of settings this stack to which I am new), I did this -which seems to work:

extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          test: /\.css$/,
          loader: 'eslint-loader',
          loader: 'stylus-loader',
          loader: 'css-loader',
          exclude: /(node_modules)/,
        })
      }
    }

When I run my project: npm run dev, all is Ok; this is also fine when I refresh my page, but I noticed whenever I open the developments tools in Chrome and I referesh the page, I get this error:

nuxt:render Rendering url /material-design-icons.css.map +225ms
{ statusCode: 404,
  path: '/material-design-icons.css.map',
  message: 'This page could not be found' }

The problem is that I already installed what Nuxt is plaining about:

npm install material-design-icons-iconfont --save

I also installed the css-stylus and stylus-loader using npm.

I want to let you know that I am importing these icon fonts in my_project/store/index.js:

import 'material-design-icons-iconfont/dist/material-design-icons.css'

How can I fix this?

• javascript
• webpack
• vuetify.js
• nuxt.js

2 Answers 2

You dont need to add css and stylus loader to nuxt, because it already have them.

As for your error -> it plains about css.map not a css. Basically it cant find map file. You could disable css map and it should be gone, but its just a warning and caused by developer tools that is looking for css source map

  build: {
    cssSourceMap: false,

In your nuxt.config.js file, you're pushing new rules incorrectly. You have two rules mashed together. They should be pushed separately -- one for .js and .vue files and one for .css files.

extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
    config.module.rules.push({
      test: /\.(js|vue)$/,
      enforce: 'pre',
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    });
    config.module.rules.push({
      test: /\.css$/,
      loader: ['css-loader', 'stylus-loader'],
      exclude: /(node_modules)/
    });
  }
}