出乎意料的人物' @'在@packort webpack配置中

时间:2018-05-11 13:50:23

标签: javascript webpack semantic-ui-css

所以现在我遇到的问题是我设置了我的webpack配置

var webpack = require('webpack');
var path = require('path');

var parentDir = path.join(__dirname, '../');

module.exports = {
  entry: [
    path.join(parentDir, 'index.js')
  ],
module: {
   rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.less$/,
      loaders: ["style-loader", "css-loader", "less-loader"]
    }, {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader?limit=100000'
    }]
  },
    output: {
    path: parentDir + '/dist',
    filename: 'bundle.js'
  },
    devServer: {
    contentBase: parentDir,
    historyApiFallback: true
  }
}

我得到的错误是

Module parse failed: Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
|  *
|  */
| @import url(https://fonts.googleapis.com/css? 
family=Lato:400,700,400italic,700italic&subset=latin);/*!

我知道我需要为这个导入添加一个规则我只是不确定我是哪个新手webpack并且找不到任何引用此类型的东西,这个@import也存在于semantic-ui-css中封装

1 个答案:

答案 0 :(得分:0)

将此位添加到配置文件中的模块似乎可以解决问题:

{
  test: /\.css$/,
  use: [
    'to-string-loader',
    'css-loader',
    'resolve-url-loader'
  ]
}