使用 webpack 导入/应用 CSS 文件

Question

我一直都对 webpack 不满意，但这次我被打败了...... 这听起来很简单：我只想导入我的应用我的 CSS。

他是我的项目结构：

/src
|_assets/
|  |_index.html
|_components/
|  |_App.js
|  |_WelcomeLogo.js
|_styles/
|  |_welcomeLogo.css
|_index.js

所以，index.js 导入 App.js，App.js 导入 WelcomeLogo.js，js 渲染正常。 WelcomeLogo.js 导入 welcomeLogo.css : import './../styles/welcomeLogo.css';

这是我的 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'
      }
    }),
  ]
};

所以问题是，没有 CSS 应用于我的输出应用程序... 这是第一次没有做到这一点，并感到有点失落。 感谢您的帮助。

Webpack 版本：4.41.2

npm run build 表示已找到 css，并已解析...但其内容不是 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

如果我使用 MiniCssExtractPlugin，它会生成一个 css 文件……但是是空的。 而且我的welcomeLogo.css 文件不是空的，并且根据W3C 验证器是正确的...

Answer 1

我认为css的导入路径是错误的。它应该是'../styles/welcomeLogo.css'。