模块解析失败：意外字符“@”(1:0) - 您可能需要适当的加载程序来处理此文件类型

Question

当运行 npm start 时，webpack 抛出错误：

ERROR in ./src/style/main.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "header.less";
| @color: #f5adad;
| body {
 @ ./src/index.js 1:0-27

在我的 main.less 文件中，我正在做：

@import "header.less";
@color: #f5adad;
body {
  background-color: @color;
}

在我的 header.less 文件中，我正在做：

.header {
    background-color: #3d3d;
  }

在我的 index.js 文件中，我正在做：

import "./style/main.less";

我的 webpack.config.js 看起来像：

module.exports = {
    devtool: 'inline-source-map',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '/dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
};

我的 package.json 看起来像：

{
  "name": "react-config-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "format": "prettier --write \"src/**/*.js\"",
    "eslint-fix": "eslint --fix \"src/**/*.js\"",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "css-loader": "^6.7.1",
    "eslint": "^7.32.0",
    "eslint-config-react": "^1.1.7",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.29.4",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "prettier": "2.6.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }
}

此外，因为我认为文件结构可能相关，所以我的文件结构如下所示：

任何人都可以就如何解决问题提出建议吗？我对 webpack 太陌生了，甚至建议根本原因可能在哪里。

Answer 1

您的文件命名有误。 p 和 b 位置错误。使用 webpack.config.js 而不是 wepback.config.js

另一个问题是您的文件位于 src/ 目录中 - 它需要移动到 REACT-CONFIG-TUTORIAL 目录中

模块解析失败：意外字符“@”(1:0) - 您可能需要适当的加载程序来处理此文件类型

Module parse failed: Unexpected character '@' (1:0) - You may need an appropriate loader to handle this file type

reactjs

webpack