Laravel микс css опустошается из-за секунды js - PullRequest
Новая
       7

Laravel микс css опустошается из-за секунды js

0 голосов
/ 06 января 2020

У меня есть следующая конфигурация: 

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

if (mix.inProduction()) {
    mix.version();
} else {
    mix.sourceMaps();
}

// webpack.mix.js
const path = require('path'),
    WebpackShellPlugin = require('webpack-shell-plugin'),
    BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
    {CleanWebpackPlugin} = require('clean-webpack-plugin');

mix.webpackConfig({
    plugins: [
        new WebpackShellPlugin({
            onBuildStart: [
                'php artisan js-localization:export --quiet',
                'php artisan ziggy:generate resources/js/ziggy-routes.js --quiet'
            ]
        }),
        new BundleAnalyzerPlugin({
            analyzerMode: mix.inProduction() ? 'disabled' : 'server',
            openAnalyzer: false
        }),
        new CleanWebpackPlugin({
            dry: false,
            cleanStaleWebpackAssets: true,
            cleanOnceBeforeBuildPatterns: [],
            cleanAfterEveryBuildPatterns: [
                'js/chunk/*'
            ],
            dangerouslyAllowCleanPatternsOutsideProject: false,
        }),
    ],
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
        },
    },
    output: {
        publicPath: '/',
        chunkFilename: mix.inProduction() ? 'js/chunk/[name].[chunkhash].js': 'js/chunk/[name].js',
    }
});


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

Когда я удаляю .js('resources/js/app.js', 'public/js') или .js('resources/js/project.js', 'public/js') мое приложение. css имеет действительный код css. Когда я использую их оба, мое приложение. css полностью пусто и имеет размер 0 КБ.

Я также удалил плагины BundleAnalyzerPlugin и CleanWebpackPlugin, но затем результат остается тем же. Я понятия не имею, почему это происходит.

Когда я запускаю npm run watch, это журнал: 

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run watch --scripts-prepend-node-path=auto

> @ watch /Users/username/Sites/smaragt-cms
> npm run development -- --watch


> @ development /Users/username/Sites/smaragt-cms
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

Executing pre-build scripts
10% building 2/2 modules 0 active
webpack is watching the files…

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 15922ms                                                                                                                                                                                       10:10:55 AM

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
                                                                                              Asset      Size                              Chunks             Chunk Names
                                                                                       /css/app.css   0 bytes  /js/app, /js/manifest, /js/project  [emitted]  /js/app, /js/manifest, /js/project
                                                                                    /js/manifest.js  8.95 KiB                        /js/manifest  [emitted]  /js/manifest
   fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?5063b105c7646c8043d58c5289f02cca   128 KiB                                      [emitted]  
   fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?a9c4bb7348f42626454c988dbde1d0a0   684 KiB                                      [emitted]  
   fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?06147b6cd88c7346cecd1edd060cd5de   128 KiB                                      [emitted]  
 fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?cccc9d29470e879e40eb70249d9a2705  73.6 KiB                                      [emitted]  
  fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?c5e0f14f88a828261ba01558ce2bf26f  86.4 KiB                                      [emitted]  
  fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?c1a866ec0e04a5e1915b41fcf261457c  33.6 KiB                                      [emitted]  
  fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?7b9568e6389b1f8ae0902cd39665fc1e   141 KiB                                      [emitted]  
  fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?65b286af947c0d982ca01b40e1fcab38  33.3 KiB                                      [emitted]  
fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?f5f2566b93e89391da4db79462b8078b  13.3 KiB                                      [emitted]  
 fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?c4f508e7c4f01a9eeba7f08155cde04e  16.4 KiB                                      [emitted]  
    fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?8e4a6dcc692b3887f9f542cd6894d6d4   188 KiB                                      [emitted]  
    fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?c2801fb415f03c7b170934769d7b5397   823 KiB                                      [emitted]  
    fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?0bff33a5fd7ec390235476b4859747a0   188 KiB                                      [emitted]  
  fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?44d537ab79f921fde5a28b2c1636f397    74 KiB                                      [emitted]  
   fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?333bae208dc363746961b234ff6c2500  96.1 KiB                                      [emitted]  
                                                                                js/chunk//js/app.js   131 KiB                             /js/app  [emitted]  /js/app
                                                                            js/chunk//js/project.js  36.5 KiB                         /js/project  [emitted]  /js/project
                                                                             js/chunk//js/vendor.js    12 MiB                          /js/vendor  [emitted]  /js/vendor
                                                                                      js/chunk/0.js   312 KiB                                   0  [emitted]  
                                                                                      js/chunk/1.js   306 KiB                                   1  [emitted]  
                                                                                     js/chunk/10.js   310 KiB                                  10  [emitted]  
                                                                                     js/chunk/11.js  42.8 KiB                                  11  [emitted]  
                                                                                     js/chunk/12.js  46.5 KiB                                  12  [emitted]  
                                                                                     js/chunk/13.js   380 KiB                                  13  [emitted]  
                                                                                     js/chunk/14.js  35.1 KiB                                  14  [emitted]  
                                                                                     js/chunk/15.js  49.7 KiB                                  15  [emitted]  
                                                                                     js/chunk/16.js  27.5 KiB                                  16  [emitted]  
                                                                                     js/chunk/17.js  24.1 KiB                                  17  [emitted]  
                                                                                     js/chunk/18.js  21.3 KiB                                  18  [emitted]  
                                                                                     js/chunk/19.js  14.7 KiB                                  19  [emitted]  
                                                                                      js/chunk/2.js  74.1 KiB                                   2  [emitted]  
                                                                                     js/chunk/20.js    14 KiB                                  20  [emitted]  
                                                                                     js/chunk/21.js  16.9 KiB                                  21  [emitted]  
                                                                                     js/chunk/22.js  20.4 KiB                                  22  [emitted]  
                                                                                     js/chunk/23.js  17.9 KiB                                  23  [emitted]  
                                                                                     js/chunk/24.js  17.5 KiB                                  24  [emitted]  
                                                                                     js/chunk/25.js  18.3 KiB                                  25  [emitted]  
                                                                                     js/chunk/26.js  30.3 KiB                                  26  [emitted]  
                                                                                     js/chunk/27.js  54.4 KiB                                  27  [emitted]  
                                                                                     js/chunk/28.js  47.3 KiB                                  28  [emitted]  
                                                                                     js/chunk/29.js  54.3 KiB                                  29  [emitted]  
                                                                                      js/chunk/3.js  35.3 KiB                                   3  [emitted]  
                                                                                     js/chunk/30.js  33.5 KiB                                  30  [emitted]  
                                                                                      js/chunk/4.js  33.5 KiB                                   4  [emitted]  
                                                                                      js/chunk/5.js  36.3 KiB                                   5  [emitted]  
                                                                                      js/chunk/6.js   354 KiB                                   6  [emitted]  
                                                                                      js/chunk/7.js  67.8 KiB                                   7  [emitted]  
                                                                                      js/chunk/8.js   378 KiB                                   8  [emitted]  
                                                                                      js/chunk/9.js   306 KiB                                   9  [emitted]  


 WAIT  Compiling...                                                                                                                                                                                                           10:11:00 AM

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 371ms                                                                                                                                                                                         10:11:00 AM

                  Asset      Size                              Chunks             Chunk Names
           /css/app.css   0 bytes  /js/app, /js/manifest, /js/project  [emitted]  /js/app, /js/manifest, /js/project
    js/chunk//js/app.js   131 KiB                             /js/app  [emitted]  /js/app
js/chunk//js/project.js  36.6 KiB                         /js/project  [emitted]  /js/project
 js/chunk//js/vendor.js    12 MiB                          /js/vendor  [emitted]  /js/vendor
         js/chunk/31.js  40.5 KiB                                  31  [emitted]  
 + 32 hidden assets

Ответы [ 2 ]

0 голосов
/ 31 января 2020

У меня только что возникла связанная проблема, которая может вам помочь: мой .extract() создает приложение. css, которое заменяет мое приложение. css, сгенерированный методом .sass()

Здесь мой старый webpack.mix. js 

const mix = require('laravel-mix')

mix.options({
    extractVueStyles: true
}).setPublicPath('public')

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
    .extract()

Решение, которое я нашел :

Я указал массив модулей, которые я хочу извлечь в моем vendor. js, если ни один из них не генерирует код css, то ошибка больше не происходит. Полагаю, вам нужно открыть файл пакета. json и попытаться добавить их один за другим, чтобы увидеть, для какого пакета происходит ошибка.

Вот мой новый webpack.mix. js 

const mix = require('laravel-mix')

mix.options({
    extractVueStyles: true
}).setPublicPath('public')

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
    // dont specify any module that generates css
    .extract(['vue', 'jquery', 'hammerjs', 'photo-sphere-viewer', 'masonry-layout'])

Теперь мой app.scss не перезаписан другим модулем.

Надеюсь, это поможет вам.

0 голосов
/ 06 января 2020

Просто идея, но она может быть возможна в процессе производства, если / иначе перед компиляцией может возникнуть проблема. Здесь одни и те же вызовы, по сути, просто написаны по-разному или и прикованы. Также добавлен .extract(), чтобы посмотреть, поможет ли это, и изменился порядок разрешения псевдонимов. 

const mix = require('laravel-mix');
const path = require('path');
const WebpackShellPlugin = require('webpack-shell-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .webpackConfig({
        resolve: {
            alias: {
                ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),
            },
        },
        plugins: [
            new WebpackShellPlugin({
                onBuildStart: [
                    'php artisan js-localization:export --quiet',
                    'php artisan ziggy:generate resources/js/ziggy-routes.js --quiet'
                ]
            }),
            new BundleAnalyzerPlugin({
                analyzerMode: mix.inProduction() ? 'disabled' : 'server',
                openAnalyzer: false
            }),
            new CleanWebpackPlugin({
                dry: false,
                cleanStaleWebpackAssets: true,
                cleanOnceBeforeBuildPatterns: [],
                cleanAfterEveryBuildPatterns: [
                    'js/chunk/*'
                ],
                dangerouslyAllowCleanPatternsOutsideProject: false,
            }),
        ],
        output: {
            publicPath: '/',
            chunkFilename: mix.inProduction() ? 'js/chunk/[name].[chunkhash].js': 'js/chunk/[name].js',
        }
    })
    .js('resources/js/project.js', 'public/js')
    .js('resources/js/app.js', 'public/js')
    .extract()
    .sass('resources/sass/app.scss', 'public/css');

if (mix.inProduction()) {
    mix.version();
} else {
    mix.sourceMaps();
}
...