javascript - 如何扩展 nuxt.config.js 以将 stylus-loader 和 css-loader 添加到我的 nuxt 应用程序中？

Question

我要添加CSS loader添加以下内容到我的 Nuxt.js 项目(如文档链接中所述)webpack.config.js:

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

我还阅读了 Nuxt.js official documentation如何通过简单地修改 nuxt.config.js 文件来扩展 Nuxt.js 应用程序的 webpack.config.js ，如下所示:

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

但是当我打开nuxt.config.js时，我发现了这个片段:

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

鉴于这些信息(以及我对这个堆栈的新设置的有限了解)，我这样做了 - 这似乎有效:

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

当我运行我的项目时:npm run dev，一切正常；当我刷新页面时这也很好，但我注意到每当我在 Chrome 中打开开发工具并引用页面时，我都会收到此错误:

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

问题是我已经 installed Nuxt 提示的是什么:

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

我还安装了 css-stylus和 stylus-loader使用npm。

我想让您知道我正在 my_project/store/index.js 中导入这些图标字体:

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

我该如何解决这个问题？

Answer 1

你不需要向 nuxt 添加 css 和 stylus loader，因为它已经有了。

至于你的错误->它提示 css.map 而不是 css。基本上它找不到 map 文件。您可以禁用 css 映射，它应该消失，但这只是一个警告，是由正在寻找 css 源映射的开发人员工具引起的

  build: {
    cssSourceMap: false,