DLL入口文件引用CSS时出现‘Unexpected token’错误怎么办？

Mr.建利提问于 2026-02-17 13:13:44 阅读 10

优化

我在用webpack的DllPlugin打包常用库时，入口文件里引用了一个CSS文件：

.box { border: 1px solid red; }

但构建时提示“Unexpected token ‘.’”，检查DLL的webpack配置发现缺少css-loader。添加后依然报错，甚至出现“Can’t resolve ‘style-loader’”的错误。尝试过把CSS移到应用端入口引入，但希望优化打包速度所以想放进DLL里，该怎么解决？

我来解答赞 4 收藏

反馈

1 条解答

シ庆娇 Lv1

这个问题我踩过坑，说白了就是webpack的DLL打包对CSS处理的支持有点坑。血泪教训告诉我，问题出在你的DLL配置没有正确处理CSS文件。

首先，确保你的webpack配置里有这两个loader：css-loader和style-loader。很多人以为只加css-loader就够了，但其实style-loader也是必须的，因为它负责把CSS插入到页面里。如果你看到“Can't resolve 'style-loader'”，那就是没装这个依赖，赶紧执行 npm install style-loader --save-dev 或者 yarn add style-loader --dev。

然后，重点来了，在DLL的webpack配置里，你需要明确告诉webpack怎么处理CSS文件。比如这样：

module.exports = {

  module: {

    rules: [

      {

        test: /.css$/,

        use: ['style-loader', 'css-loader']

      }

    ]

  },

  // 其他配置...

};

注意顺序，style-loader一定要写在css-loader前面，不然还是会报错。这是因为webpack处理loader的顺序是从右到左的。

还有一个坑是，DLLPlugin本身其实更适合处理纯JavaScript库，如果你硬要把CSS放进去，可能会导致后续维护麻烦。我的建议是，如果这些CSS是某个第三方库自带的，比如bootstrap，直接在应用端引入可能更简单。但如果这些CSS是你自己写的，并且确实想优化打包速度，那就按上面的配置来。

最后提醒一下，改完配置后记得清理一下缓存，删掉之前生成的DLL文件，重新跑一遍DLL打包命令。不然webpack可能会继续用旧的缓存文件，导致配置改了也不生效。

总结一下：安装style-loader，配置好rule，清理旧文件，重新打包。搞定收工。

2026-02-17 13:14