Webpack与Owl-Carousel报错：Unexpected character 求解决方案

云上老周

2026-5-20

解决Webpack引入Owl Carousel CSS时的Unexpected Character错误

这个错误本质是Webpack默认只能处理JavaScript和JSON文件，当你直接引入.css文件时，它不知道该怎么解析这些非JS/JSON的内容，所以抛出了Unexpected character的错误。下面是具体的解决步骤：

第一步：安装所需的Loader

首先需要安装处理CSS和相关资源的loader，打开终端运行：

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

css-loader：负责解析CSS文件中的@import和url()这类引用
style-loader：把解析后的CSS注入到页面的<style>标签中
file-loader：处理CSS中引用的字体、图片等静态资源（Owl Carousel的CSS里包含了字体文件，这个是必须的）

第二步：修改Webpack配置文件

在你的Webpack配置文件里，添加对应的module.rules规则，让Webpack知道如何处理这些文件：

module.exports = {
  // 保留你原有的其他配置项...
  module: {
    rules: [
      // 处理CSS文件
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      // 处理Owl Carousel用到的字体资源
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        // 如果你用的是Webpack 4及以下版本，替换成 use: ['file-loader'] 即可
      },
    ],
  },
};