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

Posted 2023-03-06

【中文标题】Laravel Mix / Tailwind 使用 css-loader 编译问题

【英文标题】：Laravel Mix / Tailwind compiling issue with 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 希望这对你也有帮助！

【参考方案1】：

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

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