webpack学习笔记-4-less-loader

1.背景

less是一门css的扩展语言，用它我们可以更简洁地写样式。比如，

// main.css

#container {  
    width: 200px;  
    height: 100px;  
    margin: auto;  
    border: 1px solid;  
    display: flex;  
    background: url(./1.jpeg);  
}  
#container .button {  
    width: 100px;  
    height: 30px;  
    line-height: 30px;  
    text-align: center;  
    margin: auto;  
    border: 1px solid;  
    cursor: pointer;  
}

用less，我们可以这样写

// main.less

#container {  
    width: 200px;  
    height: 100px;  
    margin: auto;  
    border: 1px solid;  
    display: flex;  
    background: url(./1.jpeg);  
    color: #fff;  
    .button {  
        width: 100px;  
        height: 30px;  
        line-height: 30px;  
        text-align: center;  
        margin: auto;  
        border: 1px solid;  
        cursor: pointer;  
    }  
}

可以看到，less的语法更加直观整齐。当然less的语法有很多优点，具体请参考文档：

less中文文档

要解析这种类型的文件，就需要用到less-loader，它会在遇到less文件时，将其内容解析成相应的css文件。

2.less-loader的使用：

安装：

npm install --save-dev less-loader less

配置less-loader：

module.exports = {  
    // 入口文件路径，__dirname是根目录  
    entry: __dirname + '/src/main.js',  
    // 打包生成文件  
    output: {  
        path: __dirname + '/output',  
        filename: 'main.js'  
    },  

    module: {  
        rules: [  
            {  
                test: /\.less$/,  
                use: [  
                    'style-loader',  
                    'css-loader',  
                    'autoprefixer-loader',  
                    'less-loader'  
                ]  
            },  
            {  
                test: /\.jpeg$/,  
                // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/',  
                use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',  
            },  
        ]  
    }

注意要将demo中require('./main.css')改成require('./main.less')

接下来执行webpack打包

npm start

3.css模块化

有时候，我们的样式写在不同的文件中，可能存在一个样式文件引入另一个样式文件的情况。比如上面的样式可以这样写：

// main.less

@import 'button.less';  
#container {  
    width: 200px;  
    height: 100px;  
    margin: auto;  
    border: 1px solid;  
    display: flex;  
    background: url(./1.jpeg);  
    color: #fff;  
}

// button.less

#container {  
    .button {  
        width: 100px;  
        height: 30px;  
        line-height: 30px;  
        text-align: center;  
        margin: auto;  
        border: 1px solid;  
        cursor: pointer;  
    }  
}

引入样式文件的语句 @import 'button.less';是用css-loader进行解析的。因此我们对less文件的配置

{  
    test: /\.less$/,  
    use: [  
        'style-loader',  
        'css-loader',  
        'autoprefixer-loader',  
        'less-loader'  
    ]  
},

是这样执行的：首先，less-loader把less文件里less语法转成css语法，然后用autoprefixer-loader添加浏览器前缀，然后解析引入的文件，最后把计算好的css代码放到一个style标签插入到head标签中。

4.demo

https://github.com/KIDFUCKER/webpack-demo.git

分支 v5-less-loader