postcss обрабатывает /css/app.css и выдает CssSyntaxError после импорта vue2-daterange-picker - PullRequest
Новая
       8

postcss обрабатывает /css/app.css и выдает CssSyntaxError после импорта vue2-daterange-picker

0 голосов
/ 09 ноября 2019

Я пишу SPA с vue в проекте laravel и собираю ресурсы с помощью laravel mix (npm run watch и т. Д.) Все хорошо, прежде чем я импортирую vue2-daterange-picker в компонент vue. 

npm run watch

и 

npm run develop

хороши.

Но когда я запускаю 

npm run production

Выдает ошибку, подобную этой 

> @ production /my-project
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

CssSyntaxError: /css/app.css:3:19: Missed semicolon
    at Input.error (/my-project/node_modules/postcss/lib/input.js:130:16)
    at Parser.checkMissedSemicolon (/my-project/node_modules/postcss/lib/parser.js:603:22)
    at Parser.decl (/my-project/node_modules/postcss/lib/parser.js:286:46)
    at Parser.other (/my-project/node_modules/postcss/lib/parser.js:166:12)
    at Parser.parse (/my-project/node_modules/postcss/lib/parser.js:77:16)
    at parse (/my-project/node_modules/postcss/lib/parse.js:17:12)
    at new LazyResult (/my-project/node_modules/postcss/lib/lazy-result.js:60:16)
    at Processor.<anonymous> (/my-project/node_modules/postcss/lib/processor.js:138:12)
    at Processor.process (/my-project/node_modules/postcss/lib/processor.js:117:23)
    at Function.creator.process (/my-project/node_modules/postcss/lib/postcss.js:148:43)
    at OptimizeCssAssetsWebpackPlugin.processCss (/my-project/node_modules/optimize-css-assets-webpack-plugin/src/index.js:73:21)
    at Object.processor (/my-project/node_modules/optimize-css-assets-webpack-plugin/src/index.js:13:18)
    at each (/my-project/node_modules/last-call-webpack-plugin/src/index.js:150:10)
    at arrayEach (/my-project/node_modules/lodash/_arrayEach.js:15:9)
    at forEach (/my-project/node_modules/lodash/forEach.js:38:10)
    at OptimizeCssAssetsWebpackPlugin.process (/my-project/node_modules/last-call-webpack-plugin/src/index.js:147:5)
    at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (/my-project/node_modules/last-call-webpack-plugin/src/index.js:178:28)
    at _next0 (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:17)
    at _err0 (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at taskRunner.run (/my-project/node_modules/terser-webpack-plugin/dist/index.js:321:9)
    at step (/my-project/node_modules/terser-webpack-plugin/dist/TaskRunner.js:87:9)
    at _cacache.default.get.then (/my-project/node_modules/terser-webpack-plugin/dist/TaskRunner.js:111:15)
    at tryCatcher (/my-project/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/my-project/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/my-project/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/my-project/node_modules/bluebird/js/release/promise.js:729:18)
    at Promise._fulfill (/my-project/node_modules/bluebird/js/release/promise.js:673:18)
    at Promise._resolveCallback (/my-project/node_modules/bluebird/js/release/promise.js:466:57)
    at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:559:17)
    at Promise._settlePromise (/my-project/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/my-project/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/my-project/node_modules/bluebird/js/release/promise.js:729:18)
    at Promise._fulfill (/my-project/node_modules/bluebird/js/release/promise.js:673:18)
    at Promise._resolveCallback (/my-project/node_modules/bluebird/js/release/promise.js:466:57)
    at Promise._settlePromiseFromHandler (/my-project/node_modules/bluebird/js/release/promise.js:559:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2019-11-09T04_25_23_448Z-debug.log

упомянутый в сообщении об ошибке файл /css/app.css был сгенерирован laravel mix следующей строкой в ​​webpack.mix.js. 

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

Вот мои package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "axios": "^0.19.0",
        "bootstrap": "^4.3.1",
        "cross-env": "^6.0.3",
        "dateformat": "^3.0.3",
        "jquery": "^3.4.1",
        "laravel-mix": "^5.0.0",
        "laravel-mix-polyfill": "^1.1.0",
        "lodash": "^4.17.15",
        "popper.js": "^1.16.0",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.23.3",
        "sass-loader": "^8.0.0",
        "vue": "^2.6.10",
        "vue-i18n": "^8.15.0",
        "vue-router": "^3.1.3",
        "vue-template-compiler": "^2.6.10",
        "vue2-daterange-picker": "^0.3.1",
        "vuex": "^3.1.1"
    },
    "dependencies": {}
}

и мои webpack.mix.js

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

require('laravel-mix-polyfill');

/*
 |--------------------------------------------------------------------------
 | 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.version();

mix.babelConfig({
   plugins: ['@babel/plugin-syntax-dynamic-import'],
});

mix.webpackConfig({
   output: {
      chunkFilename: 'js/[name].[chunkhash].js',
   },
});

mix.polyfill({
   enabled: true,
   targets: [
      'cover 99.5%',
   ],
});

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

Но я все еще могу запустить 

npm run production

, но построить CSS и JavaScript отдельно 

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

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

Как я могу запустить 

npm run production

только один раз?

1 Ответ

0 голосов
/ 13 ноября 2019

Я раздвоил свою собственную версию библиотеки здесь (создал PR) , и npm run production начинает работать.

Но в Chrome консоль запускаетсявыдает какую-то ошибку, такую ​​как , эта страница проблемы описана и решена комментарием ниже .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...