How to extract styles from distribution file?

[ledermann]

Is it possible to use this component without having the styles in the tag of my applications HTML file?

I'm using Webpack 4, Vue.js 2.5.17, vue-infinite-loading 2.3.5. What I have done in my application.js:

import InfiniteLoading from 'vue-infinite-loading'
Vue.component('infinite-loading', InfiniteLoading)

The component works fine, but in production I want to extract all the CSS (from my application code and from the external components) in one application.css. How can I extract the styles from the compiled JS file?

I've found a workaround by using the source files of the component and use MiniCssExtractPlugin to extract the styles:

In application.js:

import InfiniteLoading from 'vue-infinite-loading/src/index'
Vue.component('infinite-loading', InfiniteLoading)

In environment.js:

const isProduction = process.env.NODE_ENV === 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
environment.loaders.append('less', {
  test: /\.less$/,
  use: [
    isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
    'less-loader'
  ],
})
....

But adding LESS to my project only to extract styles from an external component seems not right to me. Is there a better way?

Maybe this is a more general question regarding Webpack, so I have posted this at Stackoverflow: https://stackoverflow.com/questions/52929012/webpack-4-how-to-extract-css-from-node-module

[PeachScript]

Unfortunately, your solution looks like the only way, I will consider it carefully, please comment here if you have any idea about it.

Best Regards

[ledermann]

Thanks for your confirmation. Maybe a more flexible solution to use the component is offering CSS and JS as separated distribution files. Would you consider changing your Webpack configuration?

[PeachScript]

Thanks for your solution, but I think separated files is a breaking change, it will make trouble for old users, so I plan to solve it in the next major version.