在给style-loader
设置优先加载时(参考教程):
use: [{
loader: "style-loader",
options: {
insertAt: "top",//将当前loader添加到<head>标签内容的最上面
}
}, "css-loader"]
运行:npm run dev
发现报错了:
ERROR in ./src/index.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'insertAt'. These properties are valid:
object { injectType?, attributes?, insert?, base?, esModule?, modules? }
at validate (/Users/maolijun298/Documents/demo/h5/mm_webpack/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (/Users/maolijun298/Documents/demo/h5/mm_webpack/node_modules/style-loader/dist/index.js:25:28)
@ ./src/aaa.js 4:0-22
webpack 5.21.2 compiled with 1 error in 634 ms
ℹ 「wdm」: Failed to compile.
原因是:
- 在
webpack4.0
中insertAt
已经被废弃
,现在的api是insert
, 这是一个函数。
特别鸣谢:sunshine_uniq
正确的配置如下:
use: [{
loader: "style-loader",
options: {
//将当前loader添加到<head>标签内容的最上面
insert: function (element) {
var parent = document.querySelector('head');
var lastInsertedElement = window._lastElementInsertedByStyleLoader;
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling)
} else {
parent.appendChild(element)
}
}
}
}, "css-loader"]
暂无评论