Webpack配置报错：Unexpected character '@'，需添加适配Loader

你遇到的问题很典型——Webpack没法处理semantic-ui-css包里CSS文件中的@import语法，因为你的配置只给.less文件配了loader，完全没考虑普通.css文件的处理逻辑。

问题根源 #

报错里的Unexpected character '@'，本质是Webpack碰到CSS文件里的@import时，找不到对应的loader来解析它。semantic-ui-css的核心是CSS文件，而你当前的配置只处理.less，自然就卡壳了。

解决方案 #

分两步走就能搞定：

1. 先装依赖的loader
   如果还没安装style-loader和css-loader，先执行这条命令：

npm install --save-dev style-loader css-loader

要是你的url-loader也没装，也得补上：npm install --save-dev url-loader file-loader

2. 修改Webpack配置，新增.css文件处理规则
   在module.rules数组里加一个专门处理.css文件的规则，保留你原有的.less规则就行。修改后的完整配置如下：

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$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      // 新增的.css文件处理规则
      {
        test: /\.css$/,
        use: ["style-loader", "css-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
  }
}

为什么这样改？ #

• css-loader的作用是解析CSS里的@import、url()这类引用，把它们转换成Webpack能识别的模块；
• style-loader会把解析后的CSS注入到页面的<style>标签里，让样式真正生效；
• 新增的规则专门匹配.css文件，这样semantic-ui-css包里的CSS文件就能被正确处理了。

内容的提问来源于stack exchange，提问作者Dillon Dunn