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

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

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

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

文字コード

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

Sass

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

CSS

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

gulp

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

Q&A

0回答

2129閲覧

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

nrsm

総合スコア6

Webサイト

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

文字コード

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

Sass

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

CSS

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

gulp

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

0グッド

0クリップ

投稿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

1/* 2Error: Invalid Windows-31J character "\xE3" 3 on line 7 of C:/Users/my-name/Documents/project/src/sass/pc_style.scss 4 52: @import "compass"; 63: @import "_vars"; 74: @import "_common"; 85: @import "_utility"; //add 96: 107: /* ヘッダ */ 118: header.main { 129: position: fixed; 1310: background-color: rgba(255,255,255,1); 1411: width: 100%; 1512: top:0; 16 17Backtrace: 18C:/Users/my-name/Documents/project/src/sass/pc_style.scss:7 19C:/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' 20C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1322:in `block in find_encoding_error' 21C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1321:in `each' 22C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1321:in `each_with_index' 23C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:1321:in `find_encoding_error' 24C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/util.rb:930:in `check_sass_encoding' 25C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/engine.rb:439:in `check_encoding!' 26C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/engine.rb:395:in `_to_tree' 27C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/engine.rb:284:in `render' 28C:/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' 29C:/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' 30C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-import-once-1.0.5/lib/compass/import-once/engine.rb:16:in `render' 31C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:494:in `update_stylesheet' 32C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets' 33C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `each' 34C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `update_stylesheets' 35C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/sass_compiler.rb:40:in `compile!' 36C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/commands/update_project.rb:49:in `perform' 37C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/commands/base.rb:18:in `execute' 38C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/commands/project_base.rb:19:in `execute' 39C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:43:in `perform!' 40C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:15:in `run!' 41C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/bin/compass:30:in `block in <top (required)>' 42C:/Ruby25-x64/lib/ruby/gems/2.5.0/gems/compass-1.0.3/bin/compass:44:in `<top (required)>' 43C:/Ruby25-x64/bin/compass:23:in `load' 44C:/Ruby25-x64/bin/compass:23:in `<main>' 45*/ 46body:before { 47 white-space: pre; 48 font-family: monospace; 49 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;"; } 50

試したこと

コンパイルされた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に変更保存をしました。

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

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

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

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

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

technocore

2020/05/01 11:19

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問