在执行以下步骤之前，一切都正常。我使用的是带有 Vue、scss 和 bootstrap 的 laravel。我尝试在提交中后退，但仍然无法编译。

发生了什么：

我试图让我的 Vue 样式使用 @extend 来引入 bootstrap 类。这是代码：

    <style lang="scss">
    
    .checkmark{
        margin-top: -0.3rem !important;
        margin-bottom: 0.1rem !important;
        font-size: 28px;
    }
    
    .uncheck{
        @extend .text-danger;
    }
    </style>

我这样做了，但仍然无法让该类应用。因此，我尝试按照此处的 Vue 文档进行操作： https://vue-loader.vuejs.org/guide/pre-processors.html#sass 并运行 npm install -D sass-loader node-sass 并将推荐的代码添加到我的 webpack.mix.js 。

这仍然不起作用，我继续收到一条错误，告诉我添加 !optional 。

因此，我按照此处的 webpack Bootstrap 文档进行操作： https://getbootstrap.com/docs/4.5/getting-started/webpack/ 并运行： npm install --save-dev postcss-loader postcss ，（我认为我不应该安装 postcss ）另外我更新了我的 webpack.mix.js 。

我开始收到此错误：

ERROR in ./resources/sass/welcome.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:

因此，我尝试恢复到之前的 package.json 文件：

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},

其中一部分包括运行： npm uninstall --save-dev postcss & npm uninstall --save-dev postccs-loader

我还将我的 webpack.mix.js 恢复为：

    const mix = require('laravel-mix');
    
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .sass('resources/sass/welcome.scss', 'public/css');

我遇到一个提到缓存的错误，因此我尝试运行 npm cache verify

现在当我运行 npm run dev 时，我收到此错误：

    ERROR in multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss
    Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant'
     @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss /js/app[1]
    
    ERROR in multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss
    Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant'
     @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss /js/app[2]
    
    ERROR in ./resources/js/components/ProductPreviewBar.vue
    Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant'
     @ ./resources/js/components/ProductPreviewBar.vue 4:0-78
     @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ProductCard.vue?vue&type=script&lang=js&
     @ ./resources/js/components/ProductCard.vue?vue&type=script&lang=js&
     @ ./resources/js/components/ProductCard.vue
     @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CategoryBox.vue?vue&type=script&lang=js&
     @ ./resources/js/components/CategoryBox.vue?vue&type=script&lang=js&
     @ ./resources/js/components/CategoryBox.vue
     @ ./resources/js/app.js
     @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the @ development 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!     C:\Users\nateg\AppData\Roaming\npm-cache\_logs\2020-09-17T16_37_51_015Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! @ dev: `npm run development`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the @ dev 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!     C:\Users\nateg\AppData\Roaming\npm-cache\_logs\2020-09-17T16_37_51_079Z-debug.log