webpack 配置中 @import 中的意外字符“@”答案

【问题标题】：Unexpected character '@' in @import at webpack configwebpack 配置中 @import 中的意外字符“@”
【发布时间】：2018-10-21 23:04:08
【问题描述】：

所以现在我遇到了我设置 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 包中

【问题讨论】：

标签： javascript webpack semantic-ui-css

【解决方案1】：

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

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

【讨论】：