Shopware 6主题插件自定义npm依赖路径无法解析求助

可能的原因及解决方案 #

1. Webpack别名的路径计算错误 #

你的webpack.config.js中，别名指向的路径层级不对。假设你的webpack.config.js位于custom/plugins/customTheme/src/Resources/app/storefront/目录下，__dirname代表当前配置文件所在的目录，你只向上退了一级（..），最终指向的是src/Resources/app/node_modules/@fortawesome，但实际node_modules是在插件根目录（custom/plugins/customTheme/）下。

修正后的webpack配置：

const { join, resolve } = require('path');

module.exports = () => {
    return {
        resolve: {
            alias: {
                '@fortawesome': resolve(
                    // 从webpack配置文件目录向上退4级到插件根目录，再指向node_modules下的@fortawesome
                    join(__dirname, '..', '..', '..', '..', 'node_modules', '@fortawesome'),
                ),
            },
        },
    };
};

2. 导入路径不完整 #

Font Awesome的all方法并不是直接在js目录下，而是在js/all.js文件中。你需要修正导入语句：

import { all } from '@fortawesome/fontawesome-free/js/all.js';

3. 确认依赖已正确安装 #

确保你已经在插件根目录（custom/plugins/customTheme/）执行了依赖安装命令：

npm install @fortawesome/fontawesome-free --save

4. 重新执行Shopware构建命令 #

修改配置和依赖后，需要重新构建storefront资源：

# 项目根目录执行
./bin/build-storefront.sh
# 或者进入storefront目录执行
cd custom/plugins/customTheme/src/Resources/app/storefront/
npm run build

内容的提问来源于stack exchange，提问作者NixH