Import/apply CSS files with webpack - css

Question

I am and have always been bad with webpack, but this time I am beaten...
Thats sounds easy : I just want to import my apply my CSS.
He is my project structure :
/src
|_assets/
| |_index.html
|_components/
| |_App.js
| |_WelcomeLogo.js
|_styles/
| |_welcomeLogo.css
|_index.js
So, index.js imports App.js, which import WelcomeLogo.js, and js is rendered properly.
WelcomeLogo.js import welcomeLogo.css : import './../styles/welcomeLogo.css';
And here is my webpackConfig :
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: [
/node_modules/,
/tests/
],
use: { loader: 'babel-loader' }
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
}
]
}
]
},
output: {
path: path.resolve(__dirname, './dist'),
filename: process.env.production ? `index.[chunkHash].js` : `index.[hash].js`
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3030,
open: true
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'BananaHammock.io',
template: 'src/assets/index.html',
meta: {
'http-equiv': 'cache-control',
'content': 'no-cache'
}
}),
]
};
So the issue is, no CSS is applied to my output App...
It is the first time to not manage to do that, and feel kind of lost.
Thanks for your help.
Webpack version : 4.41.2
npm run build shows that the css is found, and parsed... But its content is not a part of the bundle :
-> % npm run build
> xxxxxx#1.0.0 build /Users/xxxx/Documents/workspace/javascript/xxxx.io
> webpack --mode production
Hash: 480520f961b41a464f93
Version: webpack 4.41.2
Time: 2137ms
Built at: 03/17/2020 9:19:56 PM
Asset Size Chunks Chunk Names
index.480520f961b41a464f93.js 134 KiB 0 [emitted] [immutable] main
index.html 822 bytes [emitted]
Entrypoint main = index.480520f961b41a464f93.js
[7] ./src/index.js 184 bytes {0} [built]
[12] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[15] ./src/styles/welcomeLogo.css 573 bytes {0} [built]
[17] ./node_modules/css-loader/dist/cjs.js!./src/styles/welcomeLogo.css 235 bytes {0} [built]
+ 16 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.html 927 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
If I use MiniCssExtractPlugin, it generates a css file... But empty.
And my welcomeLogo.css file isn't empty, and is correct according to W3C validator...

Answer 1

I think the css importation path is wrong. it should be '../styles/welcomeLogo.css'.