Laravel Mix / Tailwind 使用 css-loader 编译问题答案

【问题标题】：Laravel Mix / Tailwind compiling issue with css-loaderLaravel Mix / Tailwind 使用 css-loader 编译问题
【发布时间】：2021-09-27 02:41:59
【问题描述】：

我正在尝试在 Laravel Mix - Laravel 8.50.0 中使用 PostCSS 编译我的 CSS（如 Install Tailwind CSS with Laravel 中所述），但是当我使用 npm run watch 编译我的资产时，我收到以下错误。

./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) 模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：
ValidationError：无效的选项对象。 CSS Loader 已经使用与 API 不匹配的选项对象进行初始化架构。

options.url 应该是以下之一：布尔值 |对象{过滤器？ } -> 允许启用/禁用url()/image-set() 函数处理。 -> 在https://github.com/webpack-contrib/css-loader#url 阅读更多信息细节：

options.url 应该是布尔值。

options.url 应该是一个对象：对象{过滤器？ } 在验证（/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11）在 Object.getOptions (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/webpack/lib/NormalModule.js:527:19) 在 Object.loader (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/css-loader/dist/index.js:31:27)

儿童 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 编译时出现 1 个错误

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"
    }
}

我们将不胜感激。

【问题讨论】：

我不是很喜欢前端，但我遇到了同样的问题。昨天尝试了几个小时，我认为它不起作用，因为我缺乏前端开发经验。但不是。我。今天发现了这个：peterbabic.dev/blog/recent-css-loader-laravel-breeze-problem 希望这对你也有帮助！

标签： laravel-8 tailwind-css postcss css-loader

【解决方案1】：

作为一种解决方法，将您的 css-loader 包降级到 5.x 版本。

npm install css-loader@5.2.7 --save-dev

【讨论】：