webpack.config.dev.js中配置less

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_26983555/article/details/78468730

当在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的样式之后(比如使用嵌套的选择器的时候,样式就搜索不出来了)。

展开阅读全文

没有更多推荐了,返回首页