postcssでコーディングしているのですが、元請けがcssそのものを望む可能性があり、 ミニファイせずにcssにトランスパイルだけしして、渡したいのですが、 なぜかコメントアウトが文字化けする部分と

Question

postcssでコーディングしているのですが、元請けがcssそのものを望む可能性があり、
ミニファイせずにcssにトランスパイルだけしして、渡したいのですが、
なぜかコメントアウトが文字化けする部分としない部分が出てきます。

https://teratail.com/questions/42353のつづき。

・下記のようになります
#map {
width: 100%;
height: 99%;/*height�̓{�[�_�[����������100�ƂȂ��̂ŁA100�ȉ��ɂ����B*/
position: absolute;
top: 0%;
left: 0;
border: medium solid #FFF;
border-bottom: medium solid #FFF !important;
box-sizing: border-box;/*�p�f�B���O�ƃ{�[�_�[�????ƍ����Ɋ܂߂�*/
pointer-events:none;/*Map���ł̊g���k���Ȃǂ????��ɂ���*/
}



・例２ 
@charset "utf-8";
/* 説明
 ・ baseで一括指定している物
box-shadowと背景のグラデーション
ヘッダー、フッターとメインコンテンツの間にある隙間
中央ぞろえは、.centeringで一括指定
テキストのシャドウ
ロングシャドウ
*/
/* Footer
----------------------------------------------------------------- */
.footer {
box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset;
}

をトランスパイルすると

@charset "utf-8";

/* ����
�@�E�@base�ňꊇ�w�肵�Ă��镨
box-shadow�Ɣw�i�̃O���f�[�V����
�w�b�_�[�A�t�b�^�[�ƃ��C���R���e���c�̊Ԃɂ��錄��
�������낦�́A.centering�ňꊇ�w��
�e�L�X�g�̃V���h�E
�����O�V���h�E
*/

/* Footer
----------------------------------------------------------------- */

.footer {
box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset;
}

となります。

ただ不思議なことに同じような内容でも文字化けしない場所もあります。

/* -----------------------------------------------------------------------------
Project
-------------------------------------------------------------------------- */

@charset "utf-8";

/* 説明
 ・ baseで一括指定している物
box-shadowと背景のグラデーション
ヘッダー、フッターとメインコンテンツの間にある隙間
中央ぞろえは、.centeringで一括指定
テキストのシャドウ
ロングシャドウ
*/

/* News
----------------------------------------------------------------- */

/* ul */

Answer 1

@charset "utf-8";

が最初に無いからでは？

って一度書きましたが、どこまでがソースですか？
質問文もコードに混ざってるようですが？
そもそも最初から文字化けしてるのですか？

Comments

[退会済みユーザー]

文字化けしているfooter.cssにも@charset "utf-8";はあります。

[Mr_Roboto]

footer.cssって記述はどこにあるのですか？

[退会済みユーザー]

ソースは下記です

@charset "utf-8";

/* 説明
　・　baseで一括指定している物
box-shadowと背景のグラデーション
ヘッダー、フッターとメインコンテンツの間にある隙間
中央ぞろえは、.centeringで一括指定
テキストのシャドウ
ロングシャドウ
*/

/* Footer
----------------------------------------------------------------- */
.footer {
box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset;
}

@media (min-width: 75em) {
.c-section-padding {
padding: 2% 10%;
}
}

@media (min-width: 34em) {
.c-section-padding {

}
}

@media (min-width: 48em) {
.c-section-padding {

}
}

@media (min-width: 75em) {
.c-section-padding {
padding: 3.5% 10%;
}
}

/* /Social-button */

[退会済みユーザー]

app.cssにまとめています。

/* =============================================================================
Foundation
========================================================================== */

@import "foundation/_reset";
@import "foundation/_base";

/* =============================================================================
Layout
========================================================================== */

@import "layout/_footer";
@import "layout/_header";
@import "layout/_main";
@import "layout/_drawer-menu";

もしかしてapp.cssに
@charset "utf-8";がないといけないのですか？
初めの行に入れてもよいのでしょうか？

[Mr_Roboto]

質問文の方を修正してください。

そもそも
＞ をトランスパイルすると
以前のソースが、文字化けしていますよね？

文字化けしているソースをトランスパイルしているのですか？
という意味で書いたつもりです。

少し落ち着いて、質問文を修正してみてはいかがですか？
私は、postcssのことほとんど知りませんが、
なんか質問として変だなぁと思ったので書いたのです。

footer.cssって質問文にないことをありますって言われても？ですよね？

攻めるつもりはありません、解決に向かえばいいなと思ってのことですので
お気を悪くなさらずに

的はずれな指摘だったらすいません。

Answer 2

�̓が一文字おきに入るのはシフトJISの特徴です。
化ける方のファイル、@charset "utf-8"と宣言しつつシフトJISで書かれていませんか。

Comments

[退会済みユーザー]

勉強不足で恐縮ですが、windows上のサブライムでそのまま打っているだけです。
どこかで設定しないと自動でUTF-8になるわけではないのでしょうか？

[yuba]

SublimeだったらむしろシフトJISで保存するためには特別なプラグインを入れる必要がありますね⋯
バイナリエディタ、Stirlingとかはを入れていたらそれで覗けませんか。
あとは、もしgit管理していたらGUIツール、SourceTreeで差分表示すると日本語部分が化けて表示されたりしませんか。

[退会済みユーザー]

サブライムに文字コードを右下に表示するコードを入れてみたところ確かに、
utf-8と出ずにwesternとでてきます。

なぜほかの文字コードになったのかはサブライムのバグなのか謎ですが、
これが原因だと思います。

ただ何度右下からutf-8に変更しても保存すると上記のフォントに戻ってしまいます。
utf-8にする方法はないのでしょうか？

もちろん文字コードのプラグインは入れていませんがまれにwindowsのメモ帳を使うことがあります。

[yuba]

sublimeにConvertToUtf8というプラグインを入れると【ファイル】-【Set Encoding to】で設定できるようになります。

[退会済みユーザー]

ありがとうございます。

Ctrl + Shift + P のショートカットでコマンドパレットを表示。
Install Package＞＞＞ConvertToUTF8と行いましたがConvertToUTF8が出てきませんでした。

出てこない理由をご存知ですか？

[yuba]

出てくるはずなのですが。
Install Packageとしたら、プラグインリストが出てきますよね。先頭はたぶん「1337 Color Scheme」というやつ。そこで「Conver」あたりまで打ち込んだら出てきました。

うまくインストールできないなら、文字コード変換用にサクラエディタUnicode版を使うのが医院じゃないですかね。

[退会済みユーザー]

コンバートチャイニーズキャラクターズというのが出てきますが
Convertまでいろいろ出てきて、Convert　toと入れると何も出てこなくなります。

すでに入っているということでしょうか？

[yuba]

> すでに入っているということでしょうか？

list packagesは確認なさいましたか？

[退会済みユーザー]

ConvertToUTF8入っているようです。

ConvertToUTF8.pyなどのファイルもConvertToUTF8フォルダの中にあるのが確認できました。
あとはどう変換するかですね。

[退会済みユーザー]

できたようです。
ありがとうございました。

ただなぜ、shifr-jisになったのかが相変わらず不明です。
sublimeにはそんなバグがあるのかもしれないですね。

カラーピッカーのショートカットを間違えるとおかしくなると聞いたことがあります