在webpack配置文件中,针对client部分添加一个条件,仅在浏览器中使用style-loader。
示例代码:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/,
use: [
// ...
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
// 针对客户端部分使用
insert: function insertAtTop(element) {
var parent = document.querySelector('head');
// eslint-disable-next-line no-unsafe-finally
var lastInsertedElement = window._lastElementInsertedByStyleLoader;
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild);
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling);
} else {
parent.appendChild(element);
}
// 更新最后插入的 element
window._lastElementInsertedByStyleLoader = element;
},
},
},
],
},
// ...
],
},
// ...
};