Laravel с семанти c -ui- css icon.woff2 404 не найдено в heroku - PullRequest
0 голосов
/ 08 июля 2020

Когда я загружаю проект в Heroku, значок Semanti c UI не отображается, и я получаю net::ERR_ABORTED 404 (Not Found) enter image description here

But in localhost, it works fine enter image description here

I have checked the path in CSS file alls looks normal

enter image description here

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'; 

Also, I add CSS file in the head like

 

Делайте какие-либо предложения пожалуйста, почему это произошло ??

1 Ответ

0 голосов
/ 11 июля 2020

Я понял, что проблема была в каталоге поставщика в папке шрифтов, я считаю, что Heroku по какой-то причине игнорирует эту папку (поставщик),

Путь fonts/vendor/semantic-ui-css/themes/default создается автоматически mix Итак, что я делаю, так это изменяю файл webpack-rules.js, помещенный в node_modules\laravel-mix\src\builder

 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
        }
    });

После проекта pu sh в Heroku все работает нормально.

Если у кого-то есть или узнайте, почему в каталоге поставщиков возникла эта проблема, пожалуйста, объясните.

Спасибо за всех.

...