Webpack 无法解析包中的相对导入答案

【问题标题】：Webpack can't resolve relative imports in packageWebpack 无法解析包中的相对导入
【发布时间】：2020-02-21 21:06:03
【问题描述】：

我完全被难住了。我已经构建了一个 sass 包，并试图通过 npm 在另一个 repo 中使用它。当我导入 sass 包时，一开始我遇到了失败，因为 webpack 无法解析导入包中的 node_module 引用。比如：

//my-sass-package/index.scss
@import '@fortawesome/fontawesome-pro/scss/variables';

我将 includePaths 添加到我的 sass-loader 并解决了原始问题，但现在 fontawesome 包中字体文件的相对路径无法解决。

所以消费链是：

my-consuming-repo < my-styles-package < fontawesome

而故障发生在这里：

//fontawesome variables.scss
'../webfonts/*.woff

这是我的 webpack 配置。非常感谢任何帮助！

module.exports = async ({ config }) => {


    config.module.rules = [...config.module.rules, {
        test: /\.scss$/,
        use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            { 
                loader: 'sass-loader',
                options: {
                    sassOptions: {
                        includePaths: ['./node_modules']
                    }
                }
            }
        ]
    },
    {
        test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
        loader: 'url-loader',
        options: {
            mimetype: 'application/font-woff2'
        }
    },
    {
        test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
        loader: 'url-loader',
        options: {
            mimetype: 'application/font-woff'
        }
    },
    // load these fonts normally, as files:
    {
        test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
        loader: 'file-loader'
    }]

    config.resolve = {
        modules: ['node_modules']
    }

    return config;
}

准确的错误

Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in 'my-styles-package\sass'

【问题讨论】：

标签： webpack node-modules webpack-4

【解决方案1】：

我缺少与 .scss 文件一起使用的 resolve-url-loader 插件，该插件似乎将 sass 引用连接到字体文件，因此有关 .woff2 类型文件丢失的错误。

【讨论】：