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

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

ただいまの
回答率

88.04%

SCSSでError: Invalid Windows-31J character “\xE3″が解消できません。

受付中

回答 0

投稿

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

score 6

SCSSのコンパイルが正常にできるようにしたいです

gulpとSassを使って、scssを自動コンパイルし、browser-syncさせているWebサイトに、追加コンテンツを作っています。
編集しているのは、pc_style.scssというファイルです。
このファイルに、VSCode上で記述を加えたところ、
・VSCodeのターミナルに後述のエラーメッセージが表示される
・ブラウザ(ローカルホスト)にも後述のcssの一部(後半15行分ほど、プロパティの記述部分)が表示される
・記述を加えていないsp_style.scssも同様のエラーが出る
・cssの記述がすべて後述のcssになり、htmlにcssがまったく反映されなくなってしまう
という問題が発生しています。

これを解決し、scssに記述を追記しても正常にコンパイルできるようにしたいです。

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

error src/sass/pc_style.scss (Line 6: Invalid Windows-31J character "\xE3")
    error src/sass/pc_style.scss (Line 6: Invalid Windows-31J character "\xE3")
    error src/sass/sp_style.scss (Line 6: Invalid Windows-31J character "\xE3")
Compilation failed in 2 files.
    error src/sass/sp_style.scss (Line 6: Invalid Windows-31J character "\xE3")
Compilation failed in 2 files.
events.js:174
      throw er; // Unhandled 'error' event
      ^
Error:     error src/sass/pc_style.scss (Line 6: Invalid Windows-31J character "\xE3")
    error src/sass/sp_style.scss (Line 6: Invalid Windows-31J character "\xE3")
Compilation failed in 2 files.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! esp@0.0.1 start: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the esp@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\my-name\AppData\Roaming\npm-cache\_logs\2020-04-30T09_36_36_545Z-debug.log

該当のソースコード

/*
Error: Invalid Windows-31J character "\xE3"
        on line 7 of C:/Users/my-name/Documents/project/src/sass/pc_style.scss

2: @import "compass";
3: @import "_vars";
4: @import "_common";
5: @import "_utility"; //add
6: 
7: /* ヘッダ *\/
8: header.main {
9:   position: fixed;
10:   background-color: rgba(255,255,255,1);
11:   width: 100%;
12:   top:0;

Backtrace:
C:/Users/my-name/Documents/project/src/sass/pc_style.scss:7
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1325:in `rescue in block in find_encoding_error'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1322:in `block in find_encoding_error'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1321:in `each'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1321:in `each_with_index'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1321:in `find_encoding_error'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:930:in `check_sass_encoding'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/engine.rb:439:in `check_encoding!'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/engine.rb:395:in `_to_tree'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/engine.rb:284:in `render'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:17:in `block in render'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:29:in `with_import_scope'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:16:in `render'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:494:in `update_stylesheet'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `each'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/sass_compiler.rb:40:in `compile!'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/commands/update_project.rb:49:in `perform'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/commands/base.rb:18:in `execute'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/commands/project_base.rb:19:in `execute'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:15:in `run!'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/bin/compass:30:in `block in <top (required)>'
C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/bin/compass:44:in `<top (required)>'
C:/Ruby25-x64/bin/compass:23:in `load'
C:/Ruby25-x64/bin/compass:23:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Error: Invalid Windows-31J character \"\xE3\"\A         on line 7 of C:/Users/my-name/Documents/project/src/sass/pc_style.scss\A \A 2: @import \"compass\";\A 3: @import \"_vars\";\A 4: @import \"_common\";\A 5: @import \"_utility\"; //add\A 6: \A 7: /* ヘッダ */\A 8: header.main {\A 9:   position: fixed;\A 10:   background-color: rgba(255,255,255,1);\A 11:   width: 100%;\A 12:   top:0;"; }

試したこと

コンパイルされたcssと、scssの一行目に@charset ”utf-8”; を追記しましたがエラーは解消されませんでした。
https://qiita.com/shunjiro/items/82740d999863d7e37abe
を参考に、VSCodeのターミナルで chcp 65001 を実行し文字コードをUTF-8に変更を試みました。

補足情報(作業環境)

VSCode バージョン: 1.44.2
scssを開いている文字コード:UTF-8
scssを開いている文字コード:CRLF
※必要な情報かは不安ですが、複数あるhtmlファイルのうち、ひとつだけ文字コードがUTF-8 with BOMになっていたので、UTF-8に変更保存をしました。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • technocore

    2020/05/01 20:19

    「該当のソースコード」
    これがpc_style.scssの中身でしょうか?
    こんなめちゃくちゃなSCSSファイルではコンパイルできません。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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