我正在laravel项目中使用vue编写SPA，并使用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/css');
mix.js('resources/assets/js/app.js','public/js');
// mix.sass('resources/assets/sass/app.scss','public/css');
我该如何跑步
npm run production
只是一次？