使用 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 '.