webpack.config.dev.js中配置less

当在webpack中配置less的时候

1. 添加less加载器

 {                test: /\.less$/,                //include: paths.appSrc,                use: [{                    loader: "style-loader" // creates style nodes from JS strings                }, {                    loader: "css-loader" // translates CSS into CommonJS                }, {                    loader: "less-loader",// compiles Less to CSS                    options:{                        sourceMap: true,                        modifyVars:theme                    }                }]            },

2.添加主题。如果没有这个的时候，会出现没有定义主题的错误

const pkg = require("../package.json");//读取package.json中的theme字段,如果是string类型，读取配置文件。如果是object类型，则作为参数传给modifyVarlet theme = {};if (pkg.theme && typeof(pkg.theme) === 'string') {    let cfgPath = pkg.theme;    // relative path    if (cfgPath.charAt(0) === '.') {        cfgPath = path.resolve(cfgPath);    }    theme = require(cfgPath);} else if (pkg.theme && typeof(pkg.theme) === 'object') {    theme = pkg.theme;}【注意，在配置完之后，项目要先编译，配置才能有效果】

3.错误步骤
一开始，以为less与css的加载一样，所以直接在 test: /.(css)/,中直接改成test:/\.(css|less)/,这样修改之后，可以在页面中编写less文件，就不会出错，但是使用到除了css的样式之后（比如使用嵌套的选择器的时候，样式就搜索不出来了）。