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类型，则作为参数传给modifyVar

let 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的样式之后（比如使用嵌套的选择器的时候，样式就搜索不出来了）。