Laravel Mix/Tailwind 与 css-loader 的编译问题

Question

我正在尝试在 Laravel Mix - Laravel 8.50.0 中使用 PostCSS 来编译我的 CSS(如 Install Tailwind CSS with Laravel 中所述)，但是当我使用以下命令编译我的 Assets 时: npm run watch 我收到了以下错误。

ERROR in ./resources/css/app.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use[2]!./resources/css/app.css) Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options.url should be one of these: boolean | object { filter? } -> Allows to enables/disables url()/image-set() functions handling. -> Read more at https://github.com/webpack-contrib/css-loader#url Details:
  • options.url should be a boolean.
  • options.url should be an object: object { filter? } at validate (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11) at Object.getOptions (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/webpack/lib/NormalModule.js:527:19) at Object.loader (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/css-loader/dist/index.js:31:27)

Child mini-css-extract-plugin /Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/css-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use1!/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use[2]!/Users/usser/Desktop/GIT/snitch/onesnitch.com/resources/css/app.css compiled with 1 error

webpack.mix.js

const mix = require("laravel-mix");

mix.webpackConfig({
    stats: {
        children: true,
    },
})
    .options({
        terser: {
            extractComments: false,
        },
    })
    .js("resources/js/app.js", "public/js")
    .vue({ version: 2 })
    .postCss("resources/css/app.css", "public/css", [require("tailwindcss")])
    .js("resources/frontend/js/app.js", "public/js/frontend")
    .postCss("resources/frontend/css/app.css", "public/css/frontend", [
        require("tailwindcss"),
    ])
    .version();

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"
    },
    "devDependencies": {
        "autoprefixer": "^10.2.5",
        "axios": "^0.21.1",
        "css-loader": "^6.1.0",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.3.5",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "tailwindcss": "^2.1.1",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/forms": "^0.3.2",
        "@tailwindcss/typography": "^0.4.0",
        "alpinejs": "^2.8.2",
        "aos": "^3.0.0-beta.6",
        "dayjs": "^1.10.4",
        "dotenv": "^8.2.0",
        "secure-ls": "^1.2.6",
        "vee-validate": "^3.4.5",
        "vue": "^2.6.12",
        "vue-i18n": "^8.24.1",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2",
        "vuex-persistedstate": "^3.2.0",
        "zxcvbn": "^4.4.2"
    }
}

如果有想法，我们将不胜感激。

Answer 1

解决方法是将您的 css-loader 软件包降级到 5.x 版本。

npm install <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb8a8a8f6b7b4babfbea99beef5e9f5ec" rel="noreferrer noopener nofollow">[email protected]</a> --save-dev