javascript - postcss 正在处理/css/app.css 并在导入 vue2-daterange-picker 后抛出 CssSyntaxError

Question

我正在 laravel 元素中使用 vue 编写 SPA，并使用 laravel mix 构建 Assets (npm run watch 等)在我在 vue 组件中导入 vue2-daterange-picker 之前一切都很好。

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

就一次吗？

Answer 1

我 fork 了自己版本的库 here (created PR) ，并且 npm run production 开始工作。

但是在 Chrome 中，控制台开始抛出一些错误，例如 this issue page described ，并通过 the comment below 解决。