报错Invalid options object. Style Loader has been initialised using an options object that does not .

最新推荐文章于 2024-02-28 10:27:57 发布

原创

最新推荐文章于 2024-02-28 10:27:57 发布 · 5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#style-loader

先贴出报错：

我用的webpack版本是：v4.36.1

根据字面意思，style-loader中不存在上述的options选项。找到node_modules里面的style-loadr源码查看：

const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === 'string' ? JSON.stringify(options.insert) : options.insert.toString();

`;
    }

    case 'styleTag':
    case 'singletonStyleTag':
    default:
      {
        const isSingleton = injectType === 'singletonStyleTag';
        const hmrCode = this.hot ? `

insertAt参数名应该是insert; 而singleton参数名应该是injectType,且值为'singletonStyleTag', 如下：

{
    test: /.less$/,
    use: [
       {
           loader: 'style-loader',
           options: {
               insert: 'top', // 样式插入到<head>
               injectType: 'singletonStyleTag', // 将所有的style标签合并成一个

最低0.47元/天解锁文章

7 条评论

飞天小秤砣 2020.11.29
为什么webpack 官网上写的配置跟 node包里的关于style-loader配置不一样呢 [code=javascript] { loader: 'style-loader', options: { singleton: true } } [/code]

qq_41850459 2020.01.15
这样虽然打包的时候不会报错但是在浏览器里面会报错

cattree_Lj 2019.08.23
这样虽然打包的时候不会报错但是在浏览器里面会报错[code=html] injectStylesIntoStyleTag.js:127 Uncaught Error: Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid. [/code]
- Luck Young回复JihanChen 2020.03.05
  [reply]hh316028133[/reply]可以使用官方给出的函数 [code=javascript]options: { insert: function insertAtTop(element) { // 将打包的css放在head标签的最顶部 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); } window._lastElementInsertedByStyleLoader = element; }, [/code]
- qq_41850459回复cjuncjy 2020.01.15
  [reply]cjuncjy[/reply]有解决吗，我的webpack版本最新的，我看文档上用的是insertAt,并没有提及insert
- JihanChen回复cattree_Lj 2019.11.27
  [reply]cattree_Lj[/reply] [code=javascript] if (typeof options.insert === 'function') { options.insert(style); } else { var target = getTarget(options.insert || 'head'); if (!target) { throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."); } target.appendChild(style); } [/code] insert里填的是你要插入的标签名称，或者是一个function，具体用法参考：https://github.com/webpack-contrib/style-loader#insert
- cjuncjy回复cattree_Lj 2019.09.19
  [reply]cattree_Lj[/reply] 我也遇到了，还没解决