使用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.js

module.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

// 引入less
import 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" ]