webpack---style-loader的配置:insertAt 和insert

这两天在配置webpack4.0的时候,出现了下面的问题

 module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt: "top"
                    },
                }, 'css-loader']
            },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

在配置style-loader的时候我想使生成的style标签在head的标签中已有style标签的上面,但是我npm run dev的时候发生了下面的报错

 

 提示不存在insertAt, 现在是insert

然后我找了相关资料,在webpack4.0中insertAt已经被废弃,现在的api是insert, 这是一个函数,正确的配置如下:

 module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        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']
            },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

 

posted @ 2020-07-07 07:18  sunshine_uniq  阅读(540)  评论(0编辑  收藏  举报