Webpack Sass-loader 和 Css-loader 'sourceMap' 选项导致失败

Posted 2023-02-22

【中文标题】Webpack Sass-loader 和 Css-loader \'sourceMap\' 选项导致失败

【英文标题】：Webpack Sass-loader and Css-loader 'sourceMap' option causing failureWebpack Sass-loader 和 Css-loader 'sourceMap' 选项导致失败

【发布时间】：2018-03-04 14:34:07

【问题描述】：

我已经与 webpack 斗争了一天多，以便为通过 ExtractTextPlugin 加载的我的 scss 文件获取源映射。

每次我得到错误：

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.relative (path.js:538:5)
    at Object.onRender (C:\Git\app\node_modules\sass-loader\index.js:282:42)
    at Object.<anonymous> (C:\Git\app\node_modules\async\dist\async.js:2244:31)
    at Object.callback (C:\Git\app\node_modules\async\dist\async.js:906:16)
    at options.success (C:\Git\app\node_modules\node-sass\lib\index.js:303:32)

我的 webpack 配置模块如下所示：

            test: /\.(css)$/,
            use: ExtractTextPlugin.extract(
                fallback: 'style-loader',
                use: 'css-loader')
        ,
        
            test: /\.(scss)$/,
            use: ExtractTextPlugin.extract(
                fallback: 'style-loader',
                use: [
                    
                        loader: 'css-loader',
                        options: 
                            sourceMap: true
                        
                    , 
                    
                        loader: 'sass-loader',
                        options: 
                            sourceMap: true
                        
                    ])
        ,

我的加载器版本是： CSS加载器：0.28.7 萨斯加载器：4.1.1 样式加载器：0.13.2 节点萨斯：3.13.1 网络包：2.2.1 提取文本 webpack 插件：2.1.0

当我删除 sourceMap 属性或从字符串中删除该属性时：

            test: /\.(scss)$/,
            use: ExtractTextPlugin.extract(
                fallback: 'style-loader',
                use: 'css-loader!sass-loader')
        

它运行得很好。如果我将“？sourceMap”添加到加载程序的末尾，那也会破坏构建。从我继续阅读的内容来看，它看起来可能是版本控制问题，但我不确定。任何想法将不胜感激。

【参考方案1】：

这是一个版本问题。 webpack.LoaderOptionsPlugin 是为了帮助过渡到新语法而创建的。最初，加载程序只被允许接受选项/参数作为字符串。 Webpack 更新了语法，但是一些加载器没有跟上，或者你有一个旧版本，或者你可能需要升级你的 webpack 版本。当我将 webpack 从 1x 升级到 2x 时，我遇到了类似的问题。最终，我更新到 3x 并且不再有这个问题了。

【参考方案2】：

结果我发现了一个在这里有效的修复： https://github.com/bholloway/resolve-url-loader/issues/33#issuecomment-249830601

我不知道为什么它会起作用，这让我很困扰。如果有人想知道为什么会这样，我很想听听。