webpack学习笔记,CSS 预处理语言less和sass(六)

Open 这个 分享 由 lemontea 发布于 2017-08-08 · 1101 阅读 0 回复
lemontea 评论于 2017-08-08

less和sass是CSS预处理语言,在webpack中通过less-loader和sass-loder可以将预处理语言编译成浏览器可识别的CSS代码。

1、安装less-loader

npm install less --save-dev
npm install less-loader --save-dev

2、在webpack.config.js中配置less-loader

module: {
        loaders: [
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader?importLoaders=1!postcss-loader!less-loader'
            }
        ]
}

在js中引入less

import './layer.less'

function layer() {
    return {
        name: 'layer'
    }
}

export default layer;

layer.less

@import './flex.less';

.layer {
    width: 600px;
    height: 200px;
    background-color: #cc0000;

    > div {
        width: 400px;
        height: 100px;
        background-color: #ffffff;
    }
}

另外,less中也可以直接import其他less

flex.less

.flex {
    display: flex;
}

如果使用了sass,那么sass-loader与less-loader使用方式是一样的。