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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

artisan

artisanは、PHP Laravelフレームワークのコマンドの事です。 Artisanコマンドを使う事で、DBのテーブルやバンドル等を追加することができるコマンドです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

4005閲覧

laravel mixでsassコンパイル時に、日本語プロパティが化ける

nieve

総合スコア33

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

artisan

artisanは、PHP Laravelフレームワークのコマンドの事です。 Artisanコマンドを使う事で、DBのテーブルやバンドル等を追加することができるコマンドです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

1クリップ

投稿2018/01/17 08:49

laravel & Vue 環境で開発を行なっています。

■環境・ツール・プラグイン
・mac osX
・laravel
・virtualBoxは経由せず、artisan serveでローカルサーバー起動
・デフォルトで入っていたlaravel mix、vueを利用
・node、node経由でvue-loaderをインストールした以外はデフォルトな状態

■困ったこと
laravel mixでsass→cssコンパイルすると…

[sass]font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN";

[css]font-family:"\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", "Hiragino Kaku Gothic ProN";

※sassファイルに@charaset記載をしていてもいなくても同様な状態となります。
※コンパイルエラーは発生しません。

■質問
文字コード指定しなくてはいけないなど、なにか関連する設定もしくはプラグインはありますでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

\30D2\30E9\30AE\30CE\89D2\30B4

その状態は、不正に文字化けしているのではなく、非ASCII文字をユニコードエスケープ形式に変換している状態です。
その方が利用上は良い状態なので、特別な事情が無い場合は成果物のcssはそのまま使って下さい。

Unicode ~ユニコードエスケープ形式とは~
CSSファイル内に非ASCII文字列を含む場合

UAが文字エンコーディングを誤って文字化けを起こさないように、@charsetルールで文字コードを必ず指定すること、あわせて非ASCII文字列を用いる際には16進表記のUnicodeへエスケープして使うことをおすすめします。16進表記のUnicodeとは、ヒラギノ角ゴ ProN W6 であれば、\30D2\30E9\30AE\30CE\89D2\30B4 ProN W6 のように非ASCII文字列をエスケープして表記します。

投稿2018/01/17 15:09

aro10

総合スコア4106

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

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

nieve

2018/01/18 01:08

ありがとうございます! 表示フォント崩れてないのは日本語「"ヒラギノ角ゴ ProN W3"」の次に書いてある「Hiragino Kaku Gothic ProN」の影響なのかな?何かな?と疑問だったのです。これで安心して制作続けられます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問