我在使用最新版webpack加载样式文件的时候 在style-loader 加载器中 配置了一下
{
loader:'style-loader',
options:{
insertAt:'top'
}
}
我第一次使用的这个配置 然后就报了 上面的错误
本意 是将解析后的样式 插入到 head 标签的位置 为 上 中 下 默认是 head标签的 最下面
这样做 会导致 用户自定义的标签样式 会被覆盖掉
然后 浏览器 就一直报错 我查了下 原来是 这个style-loader更新导致的
不能再用 insertAt 已经更新成了 insert
loader:'style-loader',
options:{
insert:'head' // 这里默认是 head标签 也可以选择插入 body标签 官方不建议修改 最好还是默认的
injectType：'styleTag' // 默认是 style样式 插入的 允许设置如何将样式注入DOM
}
这是最后在浏览器上的效果
上面那个 #f0f 是我自定义的 下面那个是通过 style-loader渲染到浏览器上 他默认渲染到 head标签底部
当然 你也可以渲染到其他标签中 来防止 自己定义的样式被覆盖掉 不过官方说了 没必要这样 也不建议
最后还是附上官方的地址
https://github.com/webpack-contrib/style-loader#insert
