javascript - webpack 配置中 @import 中的意外字符“@”

Question

所以现在我遇到了这样设置我的 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 存在于语义 UI-css 包中

Answer 1

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

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