Laravel关键CSS - criticalCss不是一个函数

Question

我一直在试着用拉拉混音、拉拉混音和拉拉混音来训练Webpack .但我一直面临着用百乐乐混合临界汇编它的问题。如果我在webpack.mix.js中评论criticalcss，它可以正常工作，但是使用criticalcss会抛出一个错误。我已经升级了npm和所有软件包，但是每当我试图编译webpack时，它都会抛出以下错误：

mix.js(...).options(...).postCss(...).options(...).sass(...).sass(...).criticalCss不是

webpack-cli TypeError：

我在webpack.mix.js中包括了laravel-mix-criticalcss

require('laravel-mix-criticalcss');

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "intersection-observer": "^0.12.0",
        "laravel-vue-pagination": "^3.0.0",
        "sass-migrator": "^1.5.4",
        "v-lazy-image": "^2.1.1",
        "vanilla-lazyload": "^17.6.1",
        "vue-clickaway": "^2.2.2",
        "vue-slider-component": "^3.2.15",
        "vue-sweetalert2": "^5.0.2",
        "vuedraggable": "^2.24.3"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.4",
        "axios": "^0.26.1",
        "bootstrap": "^4.6.0",
        "bs-custom-file-input": "^1.3.4",
        "cross-env": "^7.0.3",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.43",
        "laravel-mix-criticalcss": "^0.1.0",
        "laravel-mix-purgecss": "^6.0.0",
        "laravel-mix-workbox": "^0.1.4",
        "livewire-sortable": "^0.2.2",
        "lodash": "^4.17.21",
        "popper.js": "^1.16.1",
        "postcss": "^8.4.12",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.49.9",
        "sass-loader": "^12.6.0",
        "tailwindcss": "^3.0.23",
        "vue": "^3.2.31",
        "vue-template-compiler": "^2.6.14",
        "workbox-webpack-plugin": "^6.5.1"
    }
}

Answer 1

尝试使用新版本的Laravel关键。

npm i laravel-mix-criticalcss@latest --save-dev

或者使用这个package.json并执行npm install。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "intersection-observer": "^0.12.0",
        "laravel-vue-pagination": "^3.0.0",
        "sass-migrator": "^1.5.4",
        "v-lazy-image": "^2.1.1",
        "vanilla-lazyload": "^17.6.1",
        "vue-slider-component": "^3.2.15",
        "vue-sweetalert2": "^5.0.2",
        "vuedraggable": "^2.24.3"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.4",
        "axios": "^0.26.1",
        "bootstrap": "^4.6.0",
        "bs-custom-file-input": "^1.3.4",
        "cross-env": "^7.0.3",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.43",
        "laravel-mix-criticalcss": "^1.0.2",
        "laravel-mix-purgecss": "^6.0.0",
        "laravel-mix-workbox": "^0.1.4",
        "livewire-sortable": "^0.2.2",
        "lodash": "^4.17.21",
        "popper.js": "^1.16.1",
        "postcss": "^8.4.12",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.49.9",
        "sass-loader": "^12.6.0",
        "tailwindcss": "^3.0.23",
        "vue": "^3.2.31",
        "vue-template-compiler": "^2.6.14",
        "workbox-webpack-plugin": "^6.5.1"
    }
}