05.添加预编译语言

安装第一个预编译语言sass

<!--less和sass都用，此处用sass-->
npm install sass-loader node-sass --save-dev

修改webpack.config.js

module: {
    loaders: [
        {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
        },
    ]
},

添加app.scss

@import 'body';
@import 'header';
@import 'sidebar';
@import 'content';

将app.css拆分成body.scss/header.scss/sidebar.scss/content.scss

<!--例：header.scss-->
.header {
    position: fixed;
    top: 0;
    left: 150px;
    right: 0;
    padding: 0 30px;
    height: 61px;
    background: #ebebeb;
    .user {
        position: absolute;
        right: 0;
        top: 15px;
        height: 30px;
        line-height: 30px;
        color: gray;
    }
    .header-con {
        position: relative;
        width: 100%;
        height: 60px;
    }
    .text {
        float: left;
        height: 30px;
    }

    .avatar {
        float: right;
        width: 30px;
        height: 30px;
        img {
            width: 100%;
            height: 100%;
            border-radius: 90%;
        }
    }
}

修改/app/component/app.js

import '../style/app.css';

<!--修改为-->
import '../style/app.scss';

重新打包

webpack

安装第二个预编译语言less

<!--之后的ui框架会需要使用less-->
npm install less less-loader --save-dev

修改webpack.config.js

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