Question

我完全迷住了。我已经建立了一个sass包，并试图通过npm在另一个仓库中使用它。当我导入sass软件包时，起初我会失败，因为webpack无法解析导入的软件包中的node_module引用。像这样的东西：

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

我在自己的sass-loader中添加了includePaths，并解决了原始问题，但是现在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'

Answer 1

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

Webpack无法解析软件包中的相对导入

1 个答案: