Question

我想通过添加以下内容（如文档链接中所述） webpack.config.js ，将CSS loader添加到我的Nuxt.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

我还使用npm安装了css-stylus和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

您不需要在nuxt中添加css和手写笔加载器，因为它已经有了它们。

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

  build: {
    cssSourceMap: false,

如何扩展nuxt.config.js以将手写笔加载器和CSS加载器添加到我的nuxt应用程序中？

2 个答案: