如何使用 webpack.mix.js 编译纯 CSS答案

【问题标题】：how to compile plain CSS with webpack.mix.js如何使用 webpack.mix.js 编译纯 CSS
【发布时间】：2022-01-17 13:49:41
【问题描述】：

我正在使用 Laravel 8 PHP 框架，我需要在 localhost 上编译 JS 和 CSS 文件使用节点。当我尝试运行npm run dev 时，错误输出为：

$ npm run dev

> dev
> npm run development


> development
> mix

[webpack-cli] AssertionError [ERR_ASSERTION]: mix.combine() requires a full output file path as the second argument. Got C:\xampp\htdocs\project\public\css
    at Function.combine (C:\xampp\htdocs\project\node_modules\laravel-mix\src\Assert.js:54:9)
    at Combine.addTask (C:\xampp\htdocs\project\node_modules\laravel-mix\src\components\Combine.js:49:16)
    at Combine.register (C:\xampp\htdocs\project\node_modules\laravel-mix\src\components\Combine.js:29:14)
    at Object.components.<computed> [as styles] (C:\xampp\htdocs\project\node_modules\laravel-mix\src\components\ComponentRegistrar.js:163:49)
    at Object.<anonymous> (C:\xampp\htdocs\project\webpack.mix.js:17:5)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

我怎么看，问题出在mix文件中，语法错误会不会是个问题？

这里是代码

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

mix.js('resources/js/app.js', 'public/js')
    .js('resources/assets/js/bootstrap.js', 'public/js')
    .js('resources/assets/js/core.min.js', 'public/js')
    .js('resources/assets/js/script.js', 'public/js')
    .js('resources/assets/js/slider.js', 'public/js')
    .js('resources/assets/js/html5shiv.min.js', 'public/js')
    .js('resources/assets/js/jquery-3.6.0.min.js', 'public/js')
    .js('resources/assets/js/pointer-events.js', 'public/js');

mix.styles([
    'resources/assets/css/bootstrap.css',
    'resources/assets/css/bootstrap-grid.css',
    'resources/assets/css/bootstrap-utilities.css'
],'public/css');

mix.styles([
    'resources/assets/css/app.css',
    'resources/assets/css/util.css'
], 'public/css');

为此，我使用 Laravel 7 Docs，因为我在 Laravel 8 Docs

中没有找到任何内容

我没有使用 sass 或 scss，因为源项目每个文件有大约 30000 行 css 行，我不知道我如何转换它。

这是package.json 文件

{
  "dependencies": {
    "bootstrap-icons": "^1.7.2",
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.39"
  },
  "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"
  }
}

【问题讨论】：

标签： css laravel webpack node-modules laravel-mix

【解决方案1】：

您必须将文件作为第二个参数而不是文件夹传递。所以：

    mix.styles([
        'resources/assets/css/bootstrap.css',
        'resources/assets/css/bootstrap-grid.css',
        'resources/assets/css/bootstrap-utilities.css'
    ],'public/css/bootstrap.css');
    
    mix.styles([
        'resources/assets/css/app.css',
        'resources/assets/css/util.css'
    ], 'public/css/app.css');

【讨论】：

我没听懂，你的意思是没有'public/'？
您将 'public/css' 作为第二个参数传递，而不是通过文件名传递它。
所以正确的语法是 'app.css' 而不是 'css/app.css'
这取决于你想要输出的文件夹。如果你想把它放在 css 文件夹中，你应该传递'css/app.css'。如果您只想将它放在根文件夹中，请传递'app.css'。