时间戳

首页 > 解决方案 > Laravel Mix 将所有 vue 组件 css 提取到单个 app.css

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是空html>head的，我的组件 css作为内联样式放入：

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

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

标签： cssvue.jswebpacklaravel-mix

解决方案

推荐阅读