时间戳

首页 > 解决方案 > Webpack 无法解析包中的相对导入

webpack - Webpack 无法解析包中的相对导入

问题描述

我完全被难住了。我已经构建了一个 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'

标签： webpacknode-moduleswebpack-4

解决方案

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

推荐阅读