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

Question

我想通过添加以下内容（如文档链接中所述） webpack.config.js将CSS 加载器添加到我的 Nuxt.js 项目：

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

我还在Nuxt.js 官方文档中阅读了如何通过简单地修改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' }

问题是我已经安装了 Nuxt 抱怨的内容：

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

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

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

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

我怎样才能解决这个问题？

Answer 1

您不需要将 css 和 stylus loader 添加到 nuxt，因为它已经有了它们。

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

  build: {
    cssSourceMap: false,

Answer 2

在您的nuxt.config.js文件中，您错误地推送了新规则。 你有两个规则融合在一起。 它们应该分开推送——一个用于.js和.vue文件，另一个用于.css文件。

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