时间戳

首页 > 解决方案 > 导入css文件时出现未知字错误

vue.js - 导入css文件时出现未知字错误

问题描述

我正在尝试为我的项目导入材料图标（按照以下说明：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)

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

标签： vue.jsfrontendvuetify.jscss-loader

解决方案

So the way I resolve this problem is add it according to @Allkin's comment:

nuxt.config.js

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

Also I removed this in nuxt.config.js, otherwise it still have the same error

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

推荐阅读