css - Laravel Mix将所有Vue组件CSS提取到单个app.css

我使用Laravel Mix来将组件css编译并提取到单个文件中，例如app.css。例如，我有一个像这样的组件：

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

在webpack.mix.js中是：


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

然后将这段代码放在master..blade.php

中

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

但是app.css是空的，而我的组件css作为内联样式放在了html>head中

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

我应该怎么做才能将所有组件css提取并放入app.css中？

Laravel Mix将所有Vue组件CSS提取到单个app.css

0 个答案: