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

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