【webpack】別ファイルのstylusファイルをビルドするconfigの書き方について

webpackで、vue+pug+stylusをビルドしたいのですが、stylusをcssファイルにビルドして読み込ませる方法が分かりません。　

vueファイル内のstyleタグ内でlangにstylusを指定して変換する事はできました。　
しかし、別ファイルにしているstylusファイルをビルドする方法が分かりません。

別ファイルにしたい目的は、vueで動的に変えない静的な要素（例えばヘッダーやフッター）は、stylusファイルからビルドしたcssを使用したいためです。

configの設定で足りない部分があると考えているのですが、どの様にすればstyulsファイルからcssをビルドできるのでしょうか？
また、仮想環境で確認したいのですが、どの様に設定を書けば良いのでしょうか？

仕様

ディレクトリ構成

下記の様な構成になっています。
ビルドしたいファイルは、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"
},

ファイルについて

index.html

head内で読み込んでるcommon.cssとapp.cssは、それぞれ、common.stylusと、app.stylusをビルドしたものを読み込ませる想定で入れています。

html
1<!DOCTYPE html>
2<html lang="jp" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6  <title>タイトルタグ</title>
7  <link rel="stylesheet" href="css/common.css">
8  <link rel="stylesheet" href="css/app.css">
9</head>
10
11<body>
12  <header>
13    <h1 class="header__title">ページタイトル</h1>
14  </header>
15  <div id="app"></div>
16  <div id="main"></div>
17  <div class="container">
18    <h2 class="container__subtitle">注意</h2>
19    <p>ホゲホゲ</p>
20  </div>
21  <footer>
22    <div class="copylight">&copy; コピーライト</div>
23  </footer>
24  <script type="text/javascript" src="bundle.js"></script>
25</body>
26
27</html>

（参考）元のpugファイル

ご参考までにビルド前の状態です。

pug
1doctype html
2html(lang='jp' dir='ltr')
3  head
4    meta(charset='utf-8') 
5    title タイトルタグ
6    link(rel='stylesheet', href="css/common.css")
7    link(rel='stylesheet', href="css/app.css")
8  
9  body
10    header
11      h1.header__title ページタイトル
12
13    #app
14    #main
15    
16    .container
17      h2.container__subtitle 注意
18      p ホゲホゲ
19    
20    footer
21      .copylight &copy; コピーライト
22

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')
7
8const cleanWebpackPlugin = require('clean-webpack-plugin')
9
10module.exports = {
11
12  entry: {
13    app: './src/index.js'
14  },
15
16  output: {
17    path: path.resolve(__dirname, './dest'),
18    filename: 'bundle.js'
19  },
20
21  devServer: {
22    contentBase: path.resolve(__dirname, 'public')
23  },
24
25  module: {
26    rules: [
27      {
28        test: /.vue$/,
29        loader: 'vue-loader'
30      },
31      {
32        test: /.js$/,
33        loader: 'babel-loader'
34      },
35      {
36        test: /.pug$/,
37        oneOf: [
38          {
39            resourceQuery: /^?vue/,
40            use: [
41              'pug-plain-loader'
42            ]
43          },
44          {
45            use: [
46              'raw-loader',
47              'pug-plain-loader'
48            ]
49          }
50        ]
51      },
52      {
53        test: /.css$/,
54        use: [
55          'vue-style-loader',
56          'css-loader'
57        ]
58      },
59      {
60        test: /.styl(us)?$/,
61        exclude: /node_modules/,
62        use: [
63          {
64            loader: 'vue-style-loader'
65          },
66          {
67            loader: 'css-loader'
68          },
69          {
70            loader: 'stylus-loader'
71          }
72        ]
73      }
74    ]
75  },
76
77  // リザーブ
78  resolve: {
79    extensions: ['.js', '.vue'],
80    alias: {
81      vue$: 'vue/dist/vue.esm.js'
82    }
83  },
84
85  // プラグイン設定
86  plugins: [
87    new cleanWebpackPlugin(['dest']),
88    new vueLoaderPlugin(),
89    new htmlWebpackPlugin({
90      template: './src/pug/index.pug',
91      inject: true
92    })
93  ]
94}

App.vue

vueは下記の様に記載しました。
stylusについてですので、Counterについては省略します。

vue
1<template lang="pug">
2.container
3  h2.container__subtitle メインアプリ
4  p.container__message Heelo, World!
5  counter
6</template>
7
8<script>
9import Counter from './components/Counter'
10
11export default {
12  components: {Counter},
13}
14</script>
15
16<style lang="stylus">
17.container__message
18  color red
19</style>
20

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

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

stylusのファイルについて

stylusで現在コードがあるのは、common.stylのみですので、こちらを記載します。

stylus
1#main
2  color: red;
3  width: 100%;
4  border: 1px

実現出来ている事

前述した内容と重複しますが次の事は出来ています。

pug内に記載したstylusはビルド出来ている。
仮想環境で確認するためにwebpack-dev-server --hotを実行すると、pugから作成されたhtmlと、vueからビルドしたjsファイルを読み込まれていることが確認できた。
- 仮想環境環境は、webpack-dev-serverを使用しています。
実ファイルを生成するために、webpack -pを実行すると、pugから作成されたhtmlと、vueからビルドしたjsファイルが生成されることは確認できた。

wwbQzhMkhhgEmhU

2019/02/02 05:35

CSSとか詳しくなくてすみませんが、index.jsが分からないです。 1つでいいのでstylusファイルも置いてください。とりあえず以下の想定なら変更なしである程度動くような気がするのですが。。。 =src/index.js= import './stylus/index.stylus' =src/stylus/index.stylus @import 'a.stylus' @import 'b.stylus' @import 'c.stylus'