使用less-loader编译less，css-loader报错

Question

问题描述尝试使用less-loader时报错，显示css-loader发生错误，显示没有找到@babel/preset-env。问题出现的平台版本及自己尝试过哪些方法安装babel-preset-env，在babel的presets中添加env，仍然显示未找到@babel/preset-env相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）// .babelrc{    "plugins": [         [            "transform-runtime",             {                "polyfill": false             }         ]     ],    "presets": [ "env" ] }// webpack.config.jsmodule.exports = {    entry: "./main.js",    mode: "development",    output: {        filename: "bundle.js",        path: path.resolve(__dirname, "./dist")     },    module: {        rules: [             {                test: /\.js$/,                use: ["babel-loader"]             },             {                test: /\.less$/,                use: ["style-loader", "css-loader", "less-loader"]             }         ]     },    devtool: "source-map"};// main.js// 引入lessimport less from "./main.less";

Answer 1

这是由于babel-preset-env和less-loader版本不匹配的原因，最新版本的less-loader依赖@babel/preset-env而不是babel-preset-env，在使用npm安装时需要注意；
同时在使用最新的babel-loader时，在使用npm安装时，应该是以下对应版本：
babel-core对应@babel/core
babel-plugin-transform-runtime对应@babel/plugin-transform-runtime以及@babel/runtime
此时，.babelrc设置是：

{    "plugins": [  "@babel/transform-runtime" ],    "presets": [ "@babel/preset-env" ]
}

模块安装参考

Answer 2

.babelrc 文件中的需要修改：
"presets": [ "@babel/preset-env" ]