how to compile plain CSS with webpack.mix.js

Question

I'm using Laravel 8 PHP framework, I need to compile JS and CSS files on localhost using node. When I'm trying to run npm run dev the error output is:

$ 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: '=='
}

How I can see, the problem is in the mix file, can the wrong syntax be a problem ?

Here is the code

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');

For this I'm using Laravel 7 Docs because I didn't find anything in Laravel 8 Docs

I'm not using sass or scss, because the source project has ~30000 css lines each file, an I have no idea how I can convert it.

Here is the package.json file

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

Mahdi Bashirpour · Accepted Answer · 2022-10-06 16:18:31Z

2

You will have to pass a file as second argument instead of a folder. So:

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');

edited Oct 6, 2022 at 16:18

Mahdi Bashirpour

19k17 gold badges134 silver badges154 bronze badges

answered Jan 17, 2022 at 14:01

robvankeilegom

1681 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Van4kk Over a year ago

I didn't get it, you mean without 'public/' ?

robvankeilegom Over a year ago

You are passing 'public/css' as a second argument instead of passing it with a file name.

Van4kk Over a year ago

So the correct syntax is 'app.css' not 'css/app.css'

robvankeilegom Over a year ago

That depends in what folder you want the output. If you want it in the css folder you should pass 'css/app.css'. If you just want it in the root folder you pass 'app.css'.

Collectives™ on Stack Overflow

how to compile plain CSS with webpack.mix.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related