How to combine all styles from installed components into one css file?

D

devlocal2020-01-23 12:29:22

webpack

devlocal, 2020-01-23 12:29:22

There is a project on Laravel (v.5.7) + Vue + installed packages via npm.
How can I combine css styles from installed packages via npm into one css file.
Now in head

<head>
<link href="/css/site.css?id=71a313498e6b1e06d6c2" rel="stylesheet">
<style type="text/css">...</style>
<style type="text/css">...</style>
<style type="text/css">...</style>
<style type="text/css">
.ui-alert {
  display: -webkit-box;
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.9375rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
  -webkit-transition: margin-bottom 0.3s;
  transition: margin-bottom 0.3s;
  width: 100%;
}
</style>
</head>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alex, 2020-01-23
@Kozack

https://vue-loader.vuejs.org/ru/guide/extract-css....
https://webpack.js.org/plugins/mini-css-extract-plugin/
Or any other plugin