React 配置less-loader时遇到的问题

首先安装了less-loader less

cnpm install less less-loader --save

（注意这里安装时不能使用-g 全局安装）

webpack.config.js中配置如下，在module.export的第三方模块的rules配置中添加less文件匹配规则

    //所有第三方模块的配置规则

    module: {

        rules: [

            //第三方匹配规则

            {

                test: /\.js|jsx$/,

                use: 'babel-loader',

                exclude: /node_modules/

            },

            {

                test: /\.less$/,

                use: ['less-loader',],

            },

        ]

    },

启动报错，You may need an additional loader to handle the result of these loaders.

查找资料发现还需要添加style-loader 和css-loader

于是乎：

cnpm install css-loader style-loader --save

配置文件改为

            {

                test: /\.less$/,

                use: ['less-loader','style-loader','css-loader'],

            },

 

启动报错：

ERROR in ./src/less/login.less
Module build failed (from ./node_modules/_css-loader@4.3.0@css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

> 1 | var api = require("!../../node_modules/_style-loader@1.2.1@style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!./login.less");

 

查资料得知，css-loader 要写在style-loader之前

于是乎：

            {

                test: /\.less$/,

                use: ['less-loader','css-loader','style-loader',],

            },

启动又又又报错：Unrecognised input

ERROR in ./src/less/index.less
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

var api = require("!../../node_modules/_style-loader@1.2.1@style-loader/dist/runtime/injectStylesIntoStyleTag.js");
      ^
Unrecognised input
      

这次查资料查不到了

于是乎猜想，莫非这个三个loader的顺序不对？所以改了顺序：

            {

                test: /\.less$/,

                use: ['style-loader','css-loader','less-loader'],

            },

启动成功。。。