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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

受付中

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

nrsm
nrsm

総合スコア6

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0回答

0評価

0クリップ

1264閲覧

投稿2020/04/30 13:32

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

該当のソースコード

css

/* 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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

technocore

2020/05/01 11:19

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。