如何在Webpack 1.x.x中使用autoprefixer？

Question

我正在编写一个Angular 1.5.x应用程序，其中包含嵌入自己样式的组件。 <leave-calendar>组件定义linear-gradient背景，可在Firefox上正常运行但需要Chromium中的供应商前缀。以下是我到目前为止所做的事情：

要求

1. 一个工作组件;

2. 已安装postcss-loader：

   yarn add --dev postcss-loader
   

3. 将browserslist添加到package.json：

   "browserslist": [
       "> 1%",
       "last 2 versions",
       "ie 9"
   ]
   

leave-calendar.html

<style lang="scss">
    .leave-draft {
        background-color: #f0ad4e;
        background-image: linear-gradient(45deg, #fff3 25%, transparent 25%, transparent 50%, #fff3 50%, #fff3 75%, transparent 75%, transparent);
    }
</style>
<div class="container-fluid">
    …
</div>

配置

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, './static'),
        publicPath: '/static/',
        filename: 'app.min.js'
    },    
    resolve: {
        root: path.resolve('./src'),
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader'},
            {test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!sass-loader'},
            {test: /\.html$/, loader: 'html-loader'},
        ]
    }
};

问题

使用以下命令运行本地服务器：

webpack-dev-server --inline --hot

我没有像我预期的那样获得供应商前缀。我在配置中遗漏了什么吗？