在heroku中找不到语义用户界面css icon.woff2 404的Laravel

Question

当我将项目上传到Heroku时，语义UI的图标没有显示，我得到了net::ERR_ABORTED 404 (Not Found)

​

但在本地，它可以正常工作

​

我已经检查了CSS文件中的路径，all看起来很正常。

​

​

webpack.mix.js

mix.scripts([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/semantic-ui-css/semantic.min.js',
], 'public/js/app.js');

mix.sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Semantic
@import '~semantic-ui-css/semantic.min.css';

// Semantic ui icon
//@import '~semantic-ui-css/components/icon.min.css'; <-- I have try this not work !

另外，我在头部添加CSS文件，如下所示

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

有什么建议吗?为什么会这样？

Answer 1

我发现问题来自字体文件夹中的一个供应商目录，我认为Heroku忽略了那个文件夹(供应商)，

路径fonts/vendor/semantic-ui-css/themes/default由mix自动生成，所以我要做的是修改放置在node_modules\laravel-mix\src\builder中的webpack-rules.js文件。

 rules.push({
        // only include svg that doesn't have font in the path or file name by using negative lookahead
        test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/,
        loaders: [
            {
                loader: 'file-loader',
                options: {
                    name: path => {
                        if (!/node_modules|bower_components/.test(path)) {
                            return (
                                Config.fileLoaderDirs.images +
                                '/[name].[ext]?[hash]'
                            );
                        }

                        return (
                            Config.fileLoaderDirs.images +
                            '/' +       //<---------------------  Remove vendor from image path
                            path
                                .replace(/\\/g, '/')
                                .replace(
                                    /((.*(node_modules|bower_components))|images|image|img|assets)\//g,
                                    ''
                                ) +
                            '?[hash]'
                        );
                    },
                    publicPath: Config.resourceRoot
                }
            },

            {
                loader: 'img-loader',
                options: Config.imgLoaderOptions
            }
        ]
    });

    // Add support for loading fonts.
    rules.push({
        test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
        loader: 'file-loader',
        options: {
            name: path => {
                if (!/node_modules|bower_components/.test(path)) {
                    return Config.fileLoaderDirs.fonts + '/[name].[ext]?[hash]';
                }

                return (
                    Config.fileLoaderDirs.fonts +
                    '/' +       //<------------------------- Remove vendo from font path
                    path
                        .replace(/\\/g, '/')
                        .replace(
                            /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
                            ''
                        ) +
                    '?[hash]'
                );
            },
            publicPath: Config.resourceRoot
        }
    });

将项目推送至Heroku后，一切工作正常。

如果有人有更好的解决方案或知道供应商目录为什么会出现此问题，请解释.

谢谢大家。