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

Question

我想通过添加以下内容（如文档 link 中所述）将 CSS loader 添加到我的 Nuxt.js 项目中 webpack.config.js:

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

我还阅读了 Nuxt.js official documentation 如何通过简单地修改 来为 Nuxt.js 应用程序扩展 webpack.config.js nuxt.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

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

我想让你知道我正在 my_project/store/index.js:

中导入这些图标字体

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

我该如何解决这个问题？

Answer 1

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

Answer 2

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

至于你的错误 -> 它抱怨 css.map 而不是 css。基本上它找不到地图文件。您可以禁用 css 地图，它应该会消失，但这只是一个警告，是由正在寻找 css source map

的开发人员工具引起的

  build: {
    cssSourceMap: false,

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

How to extend nuxt.config.js to add stylus-loader and css-loader to my nuxt application?

javascript

webpack

nuxt.js

vuetify.js