Question

我正在尝试为我的项目导入素材图标（按照https://vuetifyjs.com/en/framework/icons中的说明进行操作）

nuxt.config.js

...
extend(config, {isDev, isClient, isServer}) {
      if (isDev && isClient) {
        config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/
          },
          {
            enforce: 'pre',
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        )
      }
      if (isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/]
          })
        ]
      }
    }
...

但是当我尝试运行项目时，出现此错误：

 ERROR  Failed to compile with 1 errors                                                                                                                                     4:05:21 PM

 error  in ./node_modules/material-design-icons-iconfont/dist/material-design-icons.css

Module build failed: Syntax Error

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../../css-loader/index.js!./material-design-icons.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];


 @ ./node_modules/material-design-icons-iconfont/dist/material-design-icons.css 4:14-188 13:3-17:5 14:22-196
 @ ./plugins/vuetify.js
 @ multi vue vue-router vue-meta vuex vue-style-loader/lib/addStylesClient css-loader/lib/css-base ~/plugins/vuetify.js

我的vuetify.js文件

import Vuetify from 'vuetify'
import Vue from 'vue'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify)

我不知道我做错了什么，请帮助我指出。非常感谢。

Answer 1

所以我解决此问题的方法是根据@Allkin的注释将其添加：

nuxt.config.js

css: [
    '~/assets/style/app.styl',
    'material-design-icons-iconfont/dist/material-design-icons.css'
  ],

我也在 nuxt.config.js 中将其删除，否则它仍然具有相同的错误

{
    enforce: 'pre',
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  },
  {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
  }

导入CSS文件时出现未知字错误

1 个答案: