初めて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 */
回答1件
あなたの回答
tips
プレビュー