質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 931

kitsutsuki55

score 11

初めて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

<!DOCTYPE html>
html(lang="ja")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Document
    //- CSSを読み込むためのJavascriptファイル
    script(src='index.js')
  body
    .container
      header ヘッダー
      aside サイドバー
      main メインコンテン
      footer フッター
    .container2
      .hidari.migi

style.scss

.container {
    display: grid;
    gap: 10px;
    grid-template: "header header" 50px "aside main" 1fr "aside footer" 50px / 200px 1fr;
    header {
        grid-area: header;
        background-color: aqua;
    }
    aside {
        grid-area: aside;
        background-color: aqua;
    }
    main {
        grid-area: main;
        background-color: aqua;
    }
    footer {
        grid-area: footer;
        background-color: aqua;
    }
}

.container2 {
    display: grid;
    gap: 10px;
    grid-template: "hidari migi" 50px / 100px 1fr;
    .hidari {
        grid-area: hidari;
        background-color: aqua;
    }
    .migi {
        grid-area: migi;
        background-color: #ddd;
    }
}

index.js

import "./style.scss";

package.json

{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "parcel index.pug"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^9.5.1",
        "node-sass": "^4.12.0",
        "parcel": "^1.12.3",
        "parcel-bundler": "^1.12.3",
        "postcss-modules": "^1.4.1",
        "pug": "^2.0.3"
    }
}

↓コンパイル後

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/test-p.e31bb0bc.js"></script>
    <link rel="stylesheet" href="/test-p.e31bb0bc.css">
</head>

<body>
    <div class="_container_ce634">
        <header>ヘッダー</header>
        <aside>サイドバー</aside>
        <main>メインコンテン</main>
        <footer>フッター</footer>
    </div>
    <div class="_container2_ce634">
        <div class="_hidari_ce634"></div>
        <div class="_migi_ce634">右右</div>
    </div>
</body>

</html>

test-p.e31bb0bc.css

._container_ce634 {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  -ms-grid-rows: 50px 10px 1fr 10px 50px;
  -ms-grid-columns: 200px 10px 1fr;
      grid-template: "header header" 50px "aside main" 1fr "aside footer" 50px / 200px 1fr; }
  ._container_ce634 header {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: header;
    background-color: aqua; }
  ._container_ce634 aside {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: aside;
    background-color: aqua; }
  ._container_ce634 main {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: main;
    background-color: aqua; }
  ._container_ce634 footer {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: footer;
    background-color: aqua; }

._container2_ce634 {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  -ms-grid-rows: 50px;
  -ms-grid-columns: 100px 10px 1fr;
      grid-template: "hidari migi" 50px / 100px 1fr; }
  ._container2_ce634 ._hidari_ce634 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: hidari;
    background-color: aqua; }
  ._container2_ce634 ._migi_ce634 {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: migi;
    background-color: #ddd; }


/*# sourceMappingURL=/test-p.e31bb0bc.css.map */
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kitsutsuki55

    2019/05/05 12: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 12:43

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

    キャンセル

  • kitsutsuki55

    2019/05/05 12:48

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

    キャンセル

回答 1

check解決した方法

+1

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

変更前

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true,
      "browsers": [
        "last 2 versions"
      ]
    }
  }
}



変更後

{
  "plugins": {
    "autoprefixer": {
      "grid": true,
      "browsers": [
        "last 2 versions"
      ]
      }
  }
}

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

"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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る