teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

文法の修正

2019/06/15 09:44

投稿

bokero
bokero

スコア14

title CHANGED
@@ -1,1 +1,1 @@
1
- Chrome Dev toolSassを表示し.scssファイルを直接編集した
1
+ Chromeの開発者ツールでscssファイルが表示されな
body CHANGED
@@ -1,7 +1,8 @@
1
- **環境状況**
1
+ **環境環境**
2
2
  Mac High Sierra 10.13.6
3
- Visual Studio Code使用
3
+ Visual Studio Code
4
- Google Chrome使用
4
+ Google Chrome ver74
5
+ node
5
6
  Firebase Hostingのプロジェクトディレクトリ内に以下のように配置
6
7
  .
7
8
  ├── public #納品対象
@@ -20,13 +21,12 @@
20
21
 
21
22
  **概要**
22
23
 
23
- 結論、こちらの動画みたいなchromeとVS code連携させる編集Sassでやりのです
24
+ 当方デザイナーフロントエンドエンジニアからデータ納品してもらったのですが、
24
- [https://www.youtube.com/watch?time_continue=17&v=l4yypTBvs2k](https://www.youtube.com/watch?time_continue=17&v=l4yypTBvs2k)
25
25
 
26
+ chromeでsassファイルを表示させるにはソースマップの出力が必要だと思うのですが、ソースマップの出力方法がわかりません。
27
+ おそらくpackage.jsonに記載してあったnode-sass-chokidarで--source-mapを追記するのだと思うのですが、ここからChromeとどう連携を取れば良いのかわかりません。
28
+ https://www.npmjs.com/package/node-sass-chokidar
26
29
 
27
- googl「chrome sass表示」などで検索し以下サイトの設定をためしてみましたが、Dev tool変わらずCSSファイルが表示されている状態です。
30
+ にChrome側の設定で「Enable CSS source maps」オンにして**デバッグモードテスト環境もオン**にしている状態です。
28
- [https://blog.webico.work/chrome-live-sass](https://blog.webico.work/chrome-live-sass)
29
31
 
30
-
31
- おわかりになる方、ご教授いただけますでしょうか?
32
+ どなたかおわかりになる方いらっしゃいましたら、ご教授下さ
32
- よろしくお願いします。