Mini-css-extract-plugin: What's the point of extracting CSS?
My apologies if this issue is off-base for GitHub - I've previously posted it to Stack Overflow, but it's a little quiet over there.
I'm using the Mini CSS Extract Plugin to split my CSS into its own file in my dist folder of my webpack project.
My webpack.config.js file looks like this:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
};
When I npm run build, this builds the file style.css in my dist folder, which is identical to my style.css file in my src folder. I have to include
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
in the head of index.html in the dist folder for this to work. So my question is - what's the point of extracting the CSS like this? If the style.css file in the src folder is identical to the style.css file in the dist folder, and I have to include
<link rel="stylesheet" type="text/css" href="style.css" />
in the head of my HTML, I don't understand what the advantage is of doing things this way, even though the Webpack Documentation states
Note that you can, and in most cases should, split your CSS for better load times in production.
rpivo
All 2 comments
Well the answer is as always it depends :) It's totally valid to handle CSS as a separate task in case your application isn't actually that 'complex'. But once your application gets more 'complex' and follows a more modular approach (JS-like) e.g
|–src
| |–index.js
| |– component
| | |– style.css
| | |– index.js
| |– component2
| | |– style.css
| | |– index.js
src/index.js
import component from './component'
import component2 from './component2'
component/index.js
import styles from './styles.css'
export default (props) => <article className={styles.article}></div>
component2/index.js
import styles from './styles.css'
export default (props) => <div className={styles.container}></div>
dist/style.css
/* Component CSS */
/* Component 2 CSS */
/* ... */
you will need the mini-css-extract-plugin to extract each components CSS into one CSS file based on how webpack handles code splitting etc. This way one can organize each component's CSS in a modular way
michael-ciniawsky
on 17 Mar 2018
Thanks - that makes perfect sense now.
rpivo
on 17 Mar 2018
Related issues
IdeaHunter
·
3Comments
mobilesite
·
4Comments
dmitrybelyakov
·
3Comments
stavalfi
·
4Comments
BODhaha
·
3Comments
Most helpful comment
Well the answer is as always it depends :) It's totally valid to handle CSS as a separate task in case your application isn't actually that 'complex'. But once your application gets more 'complex' and follows a more modular approach (JS-like) e.g
src/index.js
component/index.js
component2/index.js
dist/style.css
you will need the
mini-css-extract-pluginto extract each components CSS into one CSS file based on howwebpackhandles code splitting etc. This way one can organize each component's CSS in a modular way