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

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

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

解決済

1回答

525閲覧

cssが9万5000行を超えたあたりから反映されない。

tetsuji0731

総合スコア10

0グッド

0クリップ

投稿2022/09/24 14:41

編集2022/09/25 23:52

前提

scssからcssへのコンパイルを行いコーディングを進めているのですが、CSSがおおよそ9万5千行を超えたあたりからいままでcssと認識されていたものが認識されなくなってしまいました。

ファイルの中にpriceWeb.scssがあり一定量を超えて追記するとpriceWeb.scssの下の方の
scssの内容がローカルサーバー上でcssと認識されなくなってしまいます。

記述量が増えるほど下の方から順にcssが認識されずにgoogleの検証機能をつかうとアスタリスクになる具合です。

style.scssの

@use "whatChoicedGraphic";
@use "whatChoicedWeb";
@use "whatChoicedMovie";
@use "whatChoicedRetouch";
@use "question";
@use "friendIntro";
@use "priceGraphic";
@use "priceRetouch";
@use "priceMovie";
@use "priceWeb";

の順番を@use "priceWeb";を上の方にして

@use "priceWeb";
@use "whatChoicedGraphic";
@use "whatChoicedWeb";
@use "whatChoicedMovie";
@use "whatChoicedRetouch";
@use "question";
@use "friendIntro";
@use "priceGraphic";
@use "priceRetouch";
@use "priceMovie";

としたら、@use "priceWeb";は正常に作動し逆に@use "priceMovie";
の方がcssを認識しなくなりました。

やはりcssの文字数が原因かと思われます。

こちら、私の現在制作途中のWebサイトです。料金の種類がたくさんあるため、どうしてもCSSの分量が
多くなってしまいます。省略等できればしたいと考えております。

問題ページ
https://sampleserver3.sakura.ne.jp/priceWeb.html

何卒、宜しくお願い致します。

実現したいこと

CSSが反映するようにする

発生している問題・エラーメッセージ

cssが9万5000行を超えたあたりから反映されない。

なし

該当のソースコード

HTML CSS Jquery
ソースコード
こちら、一部の作成データですが、よろしければお手隙お際にご確認いただければ幸いです。
https://64.gigafile.nu/0103-gf40bc6b257820465cb4c52e18df5327f

試したこと

あらたなフォルダーの作成

コンパイルソフトの変更

SCSSの量を増やしたり減らしたりして、ある一定以上のCSS記述量になると反映さえないと確認。
minifyをしましたが、改善はされませんでした。

ファイルも1ファイルあたり当初CSSが反映された分量の半分以下になるように分割しましたが
効果はないようです。

補足情報(FW/ツールのバージョンなど)

VSコード使用
ローカル環境
ここにより詳細な情報を記載してください。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/09/24 19:35

ブラウザ開発ツールのコンソールにエラーは出ていませんか? Bootstrapですら1万行なので https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.css さすがに9万行は多すぎるというか、そこまで本当に必要なのか気になるレベルではあるのですが・・・ あと、minifyした場合はどうなりますか? あと試すとしたらファイル分割ですかね。とりあえず10個くらいに。
m.ts10806

2022/09/24 19:58

ただ、タイトルがCSSなのにコードがJavaScriptというのがなんとも。 JavaScriptはあくまでHTML要素に対して動作をさせるものなので、 CSSは無関係だと思います。addClassしてたとしても、それはそういうclassをつけるだけで 付けたclassに対するCSSが反映されるかは別問題。
tetsuji0731

2022/09/25 06:32

ご返信ありがとうございます。 ①さすがに9万行は多すぎるというか、そこまで本当に必要なのか気になるレベルではあるのですが・・・ A.こちら、私の現在制作途中のWebサイトです。料金の種類がたくさんあるため、どうしてもCSSの分量が  多くなってしまいます。省略等できればしたいと考えております。 問題ページ  https://sampleserver3.sakura.ne.jp/priceWeb.html ②minifyした場合はどうなりますか? A.minifyをしましたが、改善はされませんでした。 ③ファイル分割ですかね。とりあえず10個くらいに。 A.ファイルも1ファイルあたり当初CSSが反映された分量の半分以下になるように分割しましたが  効果はないようです。 ④タイトルがCSSなのにコードがJavaScriptというのがなんとも。JavaScriptはあくまでHTML要素に対して動作をさせるものなので、CSSは無関係だと思います。 A.承知いたしました。他の原因を探ってみます。  こちら、私の作成ファイルですが、詳細ボタンをクリックして詳細内容が表示される動きは、jsフォルダー 内のpriceGraphic.jsの1517~1679行目にあります。JavaScript上は問題ないと認識しておりますが、  経験が足りないため、何か他の原因に気づいていないかもしれません。 こちら、一部の作成データですが、よろしければお手隙お際にご確認いただければ幸いです。 https://64.gigafile.nu/0103-gf40bc6b257820465cb4c52e18df5327f
m.ts10806

2022/09/25 09:51

お手数ですが、質問本文に追記してもらえればと。。
tetsuji0731

2022/09/25 09:59

すみません。 承知いたしました。 質問本文に追記させていただきます。 なお、JavasScriptの件はm.ts10806様のご意見通りcssとは関係なく、セレクタの重複が原因でした。 ありがとうございます。
guest

回答1

0

自己解決

9万5000行ほどのcssは1ファイルあたり最大3万行以下になるように分割すれば、確実に読み込まれるようになる。

投稿2022/09/25 14:52

tetsuji0731

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問