vue-infinite-loading
vue-infinite-loading copied to clipboard
How to extract styles from distribution file?
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
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
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?
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.