React项目中Webpack引入style.min.css编译失败求助

我在React项目中使用Webpack时，尝试执行以下导入语句：

import "react-vertical-timeline-component/style.min.css";

渲染应用时出现如下编译错误：

Compiled with problems:
ERROR in ./node_modules/react-vertical-timeline-component/style.min.css 1:0
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

我查了不少Webpack配置资料，但没找到针对.min.css文件的解决方案，以下是我的Webpack配置：

const path = require("path");

/*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve. 
After that apply all the rules in module.rules and produce the output and place it in main.js in the public folder.*/

module.exports = {
  /** "mode"
   * the environment - development, production, none. tells webpack
   * to use its built-in optimizations accordingly. default is production
   */
  mode: "development",
  /** "entry"
   * the entry point
   */
  entry: "./index.js",
  output: {
    /** "path"
     * the folder path of the output file
     */
    path: path.resolve(__dirname, "public"),
    /** "filename"
     * the name of the output file
     */
    filename: "main.js",
  },
  /** "target"
   * setting "node" as target app (server side), and setting it as "web" is
   * for browser (client side). Default is "web"
   */
  target: "web",
  devServer: {
    /** "port"
     * port of dev server
     */
    port: "9500",
    /** "static"
     * This property tells Webpack what static file it should serve
     */
    static: ["./public"],
    /** "open"
     * opens the browser after server is successfully started
     */
    open: true,
    /** "hot"
     * enabling and disabling HMR. takes "true", "false" and "only".
     * "only" is used if enable Hot Module Replacement without page
     * refresh as a fallback in case of build failures
     */
    hot: true,
    /** "liveReload"
     * disable live reload on the browser. "hot" must be set to false for this to work
     */
    liveReload: true,
  },
  resolve: {
    /** "extensions"
     * If multiple files share the same name but have different extensions, webpack will
     * resolve the one with the extension listed first in the array and skip the rest.
     * This is what enables users to leave off the extension when importing
     */
    extensions: [".js", ".jsx", ".json", ".css", ".less", ".png", ".pdf"],
  },
  module: {
    /** "rules"
     * This says - "Hey webpack compiler, when you come across a path that resolves to a '.js or .jsx'
     * file inside of a require()/import statement, use the babel-loader to transform it before you
     * add it to the bundle. And in this process, kindly make sure to exclude node_modules folder from
     * being searched"
     */
    rules: [
      {
        test: /\.(js|jsx)$/, //kind of file extension this rule should look for and apply in test
        exclude: /node_modules/, //folder to be excluded
        use: "babel-loader", //loader which we are going to use
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      {
        test: /\.(pdf|png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
};

解决方案 #

问题根源是你的Webpack配置里没有添加处理普通CSS（包括.min.css）的loader规则。虽然你在resolve.extensions里配置了.css，但Webpack解析模块是靠module.rules里的正则匹配后缀来分配loader的，你现有的规则只覆盖了SCSS文件，没覆盖CSS文件。

步骤1：确保依赖安装

如果还没装style-loader和css-loader，先执行安装命令：

npm install style-loader css-loader --save-dev

步骤2：添加CSS处理规则

在module.rules数组里新增一条规则，用来匹配所有.css后缀的文件（包括.min.css）：

{
  test: /\.css$/,
  use: [
    "style-loader",
    "css-loader"
  ]
}

修改后的完整module.rules

rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: "babel-loader",
  },
  {
    test: /\.svg$/,
    use: [
      {
        loader: "svg-url-loader",
        options: {
          limit: 10000,
        },
      },
    ],
  },
  {
    test: /\.s[ac]ss$/i,
    use: [
      "style-loader",
      "css-loader",
      "sass-loader",
    ],
  },
  {
    test: /\.css$/,
    use: [
      "style-loader",
      "css-loader"
    ]
  },
  {
    test: /\.(pdf|png|jpe?g|gif)$/i,
    use: [
      {
        loader: "file-loader",
      },
    ],
  },
],

说明

.min.css只是经过压缩的CSS文件，本质还是CSS，所以用处理普通CSS的loader就能解析。添加这条规则后，Webpack遇到.min.css文件时会自动调用style-loader和css-loader处理，就能解决编译错误了。

内容的提问来源于stack exchange，提问作者JasonSmithCode