運行時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 太陌生，甚至建議根本原因可能在哪里。
uj5u.com熱心網友回復：
您的檔案命名不正確。p和b在錯誤的位置。使用webpack.config.js代替wepback.config.js
另一個問題是您的檔案在src/目錄中 - 它需要移動到REACT-CONFIG-TUTORIAL目錄中
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/468855.html