【webpack】stylusで作成したcssにautoprefixを適応したい

stylusで生成したソースに対して、autoprefixerを適用する方法を教えてください。

情報を集めていると、postcssでautoprefixerを使用するという情報を得られました。

そのため、後述するwebpack.config.jsのように、stylusに対して、次のローダーを使用するように調整しました。

vue-style-loader
css-loader
postcss-loader(autoprefixerを指定しています。)
stylus-loader

ビルド自体はできるものの、autoprefixerで追加されるはずのスタイルが追加できませんでした。
webpackとstylusを組み合わせた状態で、autoprefixを使うにはどのように設定すればよいでしょうか？

仕様

先日設問した時のソースコードをベースに作っていますので、重複する箇所もあります。

ディレクトリ構成

下記の様な構成になっています。
ビルドしたいファイルは、src/stylus配下にあるファイルです。

.
├── dest(ビルドしたファイルを置くディレクトリです)
│   ├── bundle.js
│   └── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src(ビルドする元のファイルです)
│   ├── App.vue
│   ├── components
│   │   └── Counter.vue
│   ├── index.js
│   ├── pug
│   │   ├── index.pug
│   │   └── parts
│   └── stylus
│       ├── app.stylus
│       └── common.styl
├── static
└── webpack.config.js

インストールしているnpmのライブラリ

package.jsonのライブラリの中身をそのまま転記して恐縮ですが、次のライブラリをインストールしています。
試行錯誤でインストールしたものもあり、不要なものもあるかもしれません。

  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "raw-loader": "^1.0.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^15.6.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "vue": "^2.5.22"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },

ファイルについて

webpack.config.js

js
1'use strict'
2
3const path = require('path')
4
5const vueLoaderPlugin = require('vue-loader/lib/plugin')
6const htmlWebpackPlugin = require('html-webpack-plugin')
7const cleanWebpackPlugin = require('clean-webpack-plugin')
8module.exports = {
9
10  // エントリーポイント設定
11  entry: {
12    // エントリーポイントのファイル
13    app: './src/index.js'
14  },
15
16  // 出力設定
17  output: {
18    // 出力ディレクトリ
19    path: path.resolve(__dirname, './dest'),
20    // 出力ファイル名
21    filename: 'bundle.js'
22  },
23
24  // テストサーバーの設定
25  devServer: {
26    // 起動時のrootサーバー
27    contentBase: path.resolve(__dirname, 'public')
28  },
29
30  // モジュール設定
31  module: {
32    rules: [
33      {
34        test: /.vue$/,
35        loader: 'vue-loader',
36        options: {
37          postcss: [require('autoprefixer')]
38        }
39      },
40      {
41        test: /.js$/,
42        loader: 'babel-loader'
43      },
44      {
45        test: /.pug$/,
46        oneOf: [
47          {
48            resourceQuery: /^?vue/,
49            use: [
50              'pug-plain-loader'
51            ]
52          },
53          {
54            use: [
55              'raw-loader',
56              'pug-plain-loader'
57            ]
58          }
59        ]
60      },
61      {
62        test: /.css$/,
63        use: [
64          'vue-style-loader',
65          'css-loader',
66          {
67            loader: 'postcss-loader',
68            options: {
69              plugins: [
70                require('autoprefixer')({
71                  grid: true
72                })
73              ]
74            }
75          },
76        ]
77      },
78      {
79        test: /.styl(us)?$/,
80        exclude: /node_modules/,
81        use: [
82          {
83            loader: 'vue-style-loader'
84          },
85          {
86            loader: 'css-loader'
87          },
88          {
89            loader: 'postcss-loader',
90            options: {
91              plugins: [
92                require('autoprefixer')({
93                  grid: true
94                })
95              ]
96            }
97          },
98          {
99            loader: 'stylus-loader'
100          }
101        ]
102      }
103    ]
104  },
105
106  // リザーブ
107  resolve: {
108    extensions: ['.js', '.vue'],
109    alias: {
110      vue$: 'vue/dist/vue.esm.js'
111    }
112  },
113
114  // プラグイン設定
115  plugins: [
116    new cleanWebpackPlugin(['dest']),
117    new vueLoaderPlugin(),
118    new htmlWebpackPlugin({
119      template: './src/pug/index.pug',
120      inject: true
121    })
122  ]
123}

stylusのファイル

ファイル一覧のcommon.stylの中身です。
ブラウザによって記述が変わるdisplay flexを追加しましたので、この部分が各ブラウザ毎の記述が追加される想定です。

.lists
  display flex
  justify-content space-between
  width: 100%
  .lists__list
    display block
    width 100px
    height 100px
    background-color green

index.js(エントリーポイントに使用しているjs)

js
1import Vue from 'vue'
2import App from './App'
3
4import './stylus/app.styl'
5
6new Vue({
7  el: '#app',
8  components: { App },
9  template: '<app/>'
10})

行動規範の内容に同意します

回答1件

自己解決

下記の様に変更して解決しました。

js
1'use strict'
2
3const path = require('path')
4const webpack = require('webpack')
5
6const vueLoaderPlugin = require('vue-loader/lib/plugin')
7const htmlWebpackPlugin = require('html-webpack-plugin')
8const cleanWebpackPlugin = require('clean-webpack-plugin')
9
10module.exports = {
11
12  mode: 'development',
13
14  entry: {
15    build: './src/index.ts'
16  },
17
18  output: {
19    path: path.resolve(__dirname, './dist'),
20    filename: '[name].js'
21  },
22
23  devServer: {
24    contentBase: path.resolve(__dirname, 'public'),
25    watchContentBase: true
26  },
27
28  module: {
29    rules: [{
30        test: /.vue$/,
31        loader: 'vue-loader'
32      },
33      {
34        test: /.tsx?$/,
35        loader: 'ts-loader',
36        exclude: /node_modules/,
37        options: {
38          appendTsSuffixTo: [/.vue$/],
39        }
40      },
41      {
42        test: /.css$/,
43        use: [
44          'style-loader',
45          'css-loader'
46        ]
47      },
48      {
49        test: /.pug$/,
50        oneOf: [{
51            resourceQuery: /^?vue/,
52            use: [
53              'pug-plain-loader'
54            ]
55          },
56          {
57            use: [
58              'raw-loader',
59              'pug-plain-loader'
60            ]
61          }
62        ]
63      },
64      {
65        test: /.styl(us)?$/,
66        exclude: /node_modules/,
67        use: [{
68            loader: 'vue-style-loader'
69          },
70          {
71            loader: 'css-loader'
72          },
73          {
74            loader: 'postcss-loader',
75            options: {
76              plugins: [
77                require('autoprefixer')({
78                  grid: true,
79                  browsers: [
80                    "> 1%",
81                    "last 2 versions",
82                    "not ie <= 8"
83                  ]
84                })
85              ]
86            },
87          },
88          {
89            loader: 'stylus-loader'
90          }
91        ]
92      },
93      {
94        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
95        loader: 'url-loader',
96        options: {
97          limit: 10000
98        }
99      },
100    ]
101  },
102  resolve: {
103    extensions: ['.ts', '.js', '.vue', '.json'],
104    alias: {
105      'vue$': 'vue/dist/vue.esm.js'
106    }
107  },
108  plugins: [
109    // new cleanWebpackPlugin(['dist']),
110    new htmlWebpackPlugin({
111      title: 'INDEX',
112      template: './src/index.pug'
113    }),
114    new vueLoaderPlugin()
115  ]
116}
117