Parcelでsass→cssにコンパイルするとdivのclass名が変わってしまう

初めてParcelでの環境構築を試みていますが、躓いてしまいました。

前提

プロジェクトディレクトリ直下のstyle.scssとindex.pugをParcel環境でコンパイルした際、以下のようにdistディレクトリが作成され、中にindex.htmlとcssファイル等が出来ます。
（プロジェクト名は仮にprojectとしています。）

dist
-index.html ★
-project.e31bb0bc.css ★
-project.e31bb0bc.css.map
-project.e31bb0bc.js
-project.e31bb0bc.js.map
node_modules
index.js
index.pug
package.json
style.css
style.scss
yarn.lock

ビルド後、ローカルホストのアドレスを立ち上げると、それぞれコンパイルされた上記dist内の★マーク
index.html★
が反映され、cssは
project.e31bb0bc.css★
が適応されるようでした。

問題点

ここまではなんとか理解出来たのですが、問題はproject.e31bb0bc.css内のdivコンテナのclass名が以下のように変わってしまっている点です。

元のclass名（style.scss）
.container
↓
ビルド後のclass名（project.e31bb0bc.css）
._container_ce634

対し、pugのコンパイルで生成されたdist/index.htmlは元のclass名のままなので、ローカルホストでのブラウザ確認の際はcssが全く反映されていません。

やってみた策

試しに人力でproject.e31bb0bc.cssのclass名を元に戻す／逆にindex.htmlのclass名をcssに合わせると反映されました。
ですがこれは現実的な解決方法では無いです。。index.pugやstyle.scssを更新保存すれば人力の変更部分は普通に元に戻ってしまうので。。。

「parcel class名変わる」等で検索しても全くヒットしなかったので、質問させていただいた次第です。

どなたか解決方法をご存知無いでしょうか？
よろしくお願いします。

各ファイルの中身

※プロジェクト名（ディレクトリ名）は test-p です。

index.pug

pug
1<!DOCTYPE html>
2html(lang="ja")
3  head
4    meta(charset="UTF-8")
5    meta(name="viewport", content="width=device-width, initial-scale=1.0")
6    meta(http-equiv="X-UA-Compatible", content="ie=edge")
7    title Document
8    //- CSSを読み込むためのJavascriptファイル
9    script(src='index.js')
10  body
11    .container
12      header ヘッダー
13      aside サイドバー
14      main メインコンテン
15      footer フッター
16    .container2
17      .hidari 左
18      .migi 右

style.scss

scss
1.container {
2    display: grid;
3    gap: 10px;
4    grid-template: "header header" 50px "aside main" 1fr "aside footer" 50px / 200px 1fr;
5    header {
6        grid-area: header;
7        background-color: aqua;
8    }
9    aside {
10        grid-area: aside;
11        background-color: aqua;
12    }
13    main {
14        grid-area: main;
15        background-color: aqua;
16    }
17    footer {
18        grid-area: footer;
19        background-color: aqua;
20    }
21}
22
23.container2 {
24    display: grid;
25    gap: 10px;
26    grid-template: "hidari migi" 50px / 100px 1fr;
27    .hidari {
28        grid-area: hidari;
29        background-color: aqua;
30    }
31    .migi {
32        grid-area: migi;
33        background-color: #ddd;
34    }
35}

index.js

js
1import "./style.scss";

package.json

json
1{
2    "name": "project",
3    "version": "1.0.0",
4    "description": "",
5    "main": "index.js",
6    "scripts": {
7        "test": "echo \"Error: no test specified\" && exit 1",
8        "start": "parcel index.pug"
9    },
10    "keywords": [],
11    "author": "",
12    "license": "ISC",
13    "devDependencies": {
14        "autoprefixer": "^9.5.1",
15        "node-sass": "^4.12.0",
16        "parcel": "^1.12.3",
17        "parcel-bundler": "^1.12.3",
18        "postcss-modules": "^1.4.1",
19        "pug": "^2.0.3"
20    }
21}

↓コンパイル後

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9    <script src="/test-p.e31bb0bc.js"></script>
10    <link rel="stylesheet" href="/test-p.e31bb0bc.css">
11</head>
12
13<body>
14    <div class="_container_ce634">
15        <header>ヘッダー</header>
16        <aside>サイドバー</aside>
17        <main>メインコンテン</main>
18        <footer>フッター</footer>
19    </div>
20    <div class="_container2_ce634">
21        <div class="_hidari_ce634">左</div>
22        <div class="_migi_ce634">右右</div>
23    </div>
24</body>
25
26</html>

test-p.e31bb0bc.css

css
1._container_ce634 {
2  display: -ms-grid;
3  display: grid;
4  gap: 10px;
5  -ms-grid-rows: 50px 10px 1fr 10px 50px;
6  -ms-grid-columns: 200px 10px 1fr;
7      grid-template: "header header" 50px "aside main" 1fr "aside footer" 50px / 200px 1fr; }
8  ._container_ce634 header {
9    -ms-grid-row: 1;
10    -ms-grid-column: 1;
11    -ms-grid-column-span: 3;
12    grid-area: header;
13    background-color: aqua; }
14  ._container_ce634 aside {
15    -ms-grid-row: 3;
16    -ms-grid-row-span: 3;
17    -ms-grid-column: 1;
18    grid-area: aside;
19    background-color: aqua; }
20  ._container_ce634 main {
21    -ms-grid-row: 3;
22    -ms-grid-column: 3;
23    grid-area: main;
24    background-color: aqua; }
25  ._container_ce634 footer {
26    -ms-grid-row: 5;
27    -ms-grid-column: 3;
28    grid-area: footer;
29    background-color: aqua; }
30
31._container2_ce634 {
32  display: -ms-grid;
33  display: grid;
34  gap: 10px;
35  -ms-grid-rows: 50px;
36  -ms-grid-columns: 100px 10px 1fr;
37      grid-template: "hidari migi" 50px / 100px 1fr; }
38  ._container2_ce634 ._hidari_ce634 {
39    -ms-grid-row: 1;
40    -ms-grid-column: 1;
41    grid-area: hidari;
42    background-color: aqua; }
43  ._container2_ce634 ._migi_ce634 {
44    -ms-grid-row: 1;
45    -ms-grid-column: 3;
46    grid-area: migi;
47    background-color: #ddd; }
48
49
50/*# sourceMappingURL=/test-p.e31bb0bc.css.map */

s8_chu

2019/05/05 00:46

各ファイルの内容をすべて質問文に追記していただけませんか？

kitsutsuki55

2019/05/05 02:41

ご回答コメントいただきありがとうございます。コードを記載しておらずお手数をおかけしてすみませんでした。追記しましたので、どうぞよろしくお願いします。

s8_chu

2019/05/05 03:13 編集

こちらの環境では、コンパイル毎にクラス名にランダムなプレフィックス、サフィックスが付与されることはありませんでした。`index.pug` 内のクラス名が `style.scss` と一致していませんが、 CSS が反映されない原因はこれではないのでしょうか？

kitsutsuki55

2019/05/05 03:13

大変失礼しました。 index.pug内のクラス名の記載を修正しました。（コンパイル後に変わってしまったクラス名をindex.pugに乗せて検証していた名残です。こちらに載せる際に修正し忘れていました。）

kitsutsuki55

2019/05/05 03:17

ご検証いただいてありがとうございます。そうでしたか。。コンパイルの際に何か変な命令をしてしまっているんでしょうか。。

s8_chu

2019/05/05 03:17

なるほど...。こちらでは普通に動作しているのですが、他にインストールしているパッケージや、記述しているソースコードはありますか？また、 `package-lock.json` の内容を教えていただけませんか？

kitsutsuki55

2019/05/05 03:37

s8_chu様からjsonファイルのヒントを得て確認した所、解決しました…！！ test-pディレクトリの直下に '.postcssrc' ファイルを作っており、それが悪さをしていました。最初の前提の項目でディレクトリ構成を記載していましたが、 '.postcssrc' ファイルの記載を抜かしていました。。申し訳ありません。正しいディレクトリ構成は以下です。 dist -index.html ★ -test-p.e31bb0bc.css ★ -test-p.e31bb0bc.css.map -test-p.e31bb0bc.js -test-p.e31bb0bc.js.map node_modules .postcssrc ←追記　こやつが悪さをしていたようです。 index.js index.pug package.json style.css style.scss yarn.lock '.postcssrc' の記述を以下のように変更すると解決しました。変更前） { "modules": true, "plugins": { "autoprefixer": { "grid": true, "browsers": [ "last 2 versions" ] } } } ↓ 変更後） { "parser": "postcss-scss", "plugins": { "autoprefixer": {"grid": true} } } 色々な記事を参考にコピペで作ってしまったのが仇をなしたのだと思います。反省しました。

s8_chu

2019/05/05 03:43

やはり `.postcssrc` があったのですね。いずれにせよ、解決したようで良かったです。もし解決したのであれば、解決した方法を回答として投稿して、質問を解決済みにしていただけませんか？

kitsutsuki55

2019/05/05 03:48

s8_chu様のおっしゃる通りjsonファイルが悪さをしていました。。本当にありがとうございました。そして記載ミスがあり大変失礼いたしました。解決方法を投稿いたします。

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

回答1件

自己解決

ディレクトリ直下の.postcssrcの記述が原因

変更前

json
1{
2  "modules": true,
3  "plugins": {
4    "autoprefixer": {
5      "grid": true,
6      "browsers": [
7        "last 2 versions"
8      ]
9    }
10  }
11}

↓
変更後

json
1{
2  "plugins": {
3    "autoprefixer": {
4      "grid": true,
5      "browsers": [
6        "last 2 versions"
7      ]
8      }
9  }
10}

この変更でコンパイル後のｃｓｓファイルのクラス名が変わってしまう問題が解決しました。
理由は不明（今の所）ですが、

json
1"modules": true,

を除くと正常にクラス名が引き継がれたので、上記命令が何かしら悪さをしていたのだなと思います。

質問本文の前提項、ディレクトリ構成に'.postcssrc'を記載し忘れていました。

正しいディレクトリ構成はこちらです。
（※プロジェクト名はtest-p）

dist
-index.html ★
-test-p.e31bb0bc.css ★
-test-p.e31bb0bc.css.map
-test-p.e31bb0bc.js
-test-p.e31bb0bc.js.map
node_modules
.postcssrc ←追記　こやつが悪さをしていたようです。
index.js
index.pug
package.json
style.css
style.scss
yarn.lock