javascript - 在 Webpack 中使用 CSS

Question

我继承了一个使用 webpack 的 Web 应用程序。在我的应用程序中，我有一个名为“pub”的目录，如下所示:

./pub
    /styles
      app.css
    /images
      brand.png

我整个早上都在尝试通过 webpack 使用这些，但没有成功。在我的 webpack.config.js 文件中，我有以下内容:

const path = require('path');

const projectRoot = path.resolve(__dirname, '../');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }      
    ]
  }
};

然后，在我的 index.js 文件中，我有以下内容:

import logoImage from './public/images/brand.png';
require("css!./public/css/app.css");

当我运行 webpack 时，我收到一条错误消息:

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'css-loader' instead of 'css',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

我不太明白这个错误。当我查看它，然后查看我的 webpack.config.js 文件时，在我看来我正在使用 css-loader。除此之外，一旦 require 语句起作用，我如何在我的网页中使用样式。我只是尝试将 webpack 与 Web 应用程序一起使用，并希望导入我的品牌和 CSS，但我无法弄清楚。

Answer 1

你不需要CSS!在你的 require 语句中

require("css!./public/css/app.css");

你可以直接使用

require("./public/css/app.css");

因为您正在使用以下内容测试文件:

{
    test: /\.css$/, // <-- here
    loader: "style-loader!css-loader"
  },

---

或者您的 webpack 配置中没有规则

// No test in rules matched but you tell webpack
// explicitly to use the css loader
require("style-loader!css-loader!./public/css/app.css");