Laravel-mix: Laravel Mix extract all vue component css to single app.css

Created on 18 Jun 2019  路  4Comments  路  Source: JeffreyWay/laravel-mix
  • Laravel Mix Version: 4.0.16
  • Node Version : 10.15.2
  • NPM Version : 6.4.1
  • OS: Windows 10

Description:

I use Laravel Mix to compile and extract component css to single file such as app.css. For example I have a component like this:

<template>
   <div class="text">  </div>
<template>
 ...
<style>
   .text{ color: red; }
</style>

In webpack.mix.js is:

mix.autoload({
    jquery: ['$', 'window.jQuery','window.$'],
    quill: ['window.Quill','Quill']
});

mix.options({
    extractVueStyles: 'public/css/app.css',
});

mix.js('resources/assets/js/app.js', 'public/js')
    .sourceMaps()
    .version();

and I put this code in master..blade.php

    <link rel="stylesheet" href="{{ url(mix('/css/app.css')) }}">

But app.css is empty and my component css put in html>head as inline style:

<html>
<head>
   ...
   <style>
         .text{ color: red; }
   </style>
</head>
...
</html>

What should I do to extract and put all component css in app.css?

stale
Source
picture essivision

Most helpful comment

I'm having the same issue as well.
Using extractVueStyles: true just overwrites app.css, and using extractVueStyles: '/path/to/file.css' produces an empty file

picture lorenzowoodridge on 1 Aug 2019
👍3

All 4 comments

Same here, using extractVueStyles just do nothing. Any clues ?

monkeymonk picture monkeymonk on 24 Jul 2019

I'm having the same issue as well.
Using extractVueStyles: true just overwrites app.css, and using extractVueStyles: '/path/to/file.css' produces an empty file

lorenzowoodridge picture lorenzowoodridge on 1 Aug 2019
👍3

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 30 Sep 2019

I just tried a fresh install and it seems to work as expected. Of course, after making changes to webpack.mix.js you need to call npm run dev or npm run prod or restart the watch command so that the changes have effect.

Here some examples that worked for me:

Example 1: Put css from components in file vue-components.css 

mix.options({
  extractVueStyles: 'public/css/vue-components.css'
});

mix.js('resources/js/app.js', 'public/js');

Example 2: Put css from components in file vue-components.css and compile app.scss into app.css

mix.options({
  extractVueStyles: 'public/css/vue-components.css'
});

mix.js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css');

Example 3: Put css from components into app.css and compile app.scss into app.css

mix.options({
  extractVueStyles: true
});

mix.js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css');
iwasherefirst2 picture iwasherefirst2 on 5 Apr 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sdebacker picture sdebacker  路  3Comments
dtheb picture dtheb  路  3Comments
rderimay picture rderimay  路  3Comments
kpilard picture kpilard  路  3Comments
rlewkowicz picture rlewkowicz  路  3Comments