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

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

新規登録して質問してみよう
ただいま回答率
85.37%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

2回答

5778閲覧

node-sassとWebpackでSASSのsourcemapの行数が正しく表示されない。

kumakuma112t

総合スコア8

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/10/30 02:59

SASS(SCSS)でコーディングしたものをブラウザで検証するためにソースマップを入れようとあれこれ試してるのですが、行数がずれる・正しく表示されず困ってます。

Bracketsのプラグインだけ正常に出る状態です。
エディタ依存のため、node-sassやWebpackで正常に使えるようにしたいのですが、解決策ありますか?

試したパターン
■node-sassのみ
全ブラウザ: 行数のズレ、インポートすると参照ファイルが正しくない

// package.json { "name": "sample", "version": "1.0.0", "description": "", "main": "", "scripts": { "dev": "run-p server scss", "server": "browser-sync start --server www --files=\"./www/**/*\"", "scss": "node-sass -w --source-map true --output-style compressed src/scss/style.scss www/cmn/css/style.css" }, "author": "sample", "license": "MIT License", "dependencies": { "browser-sync": "^2.18.13", "node-sass": "^4.5.3", "npm-run-all": "^4.1.1" } }

■Webpack経由
Chrome: 行数のズレ、インポートすると参照ファイルが正しくない
Safari,Firefox: 親タグまで正しいが入れ子の行数まででない

// package.json { "name": "sample", "version": "1.0.0", "description": "", "main": "", "scripts": { "dev": "webpack --watch --progress" }, "author": "sample", "license": "MIT License", "dependencies": { "browser-sync": "^2.18.13", "browser-sync-webpack-plugin": "^1.2.0", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.2", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "webpack": "^3.8.1" } }
// webpack.config.js var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); module.exports = { devtool: 'source-map', context: path.join(__dirname, 'src/scss'), entry: { style: './style.scss' }, output: { path: path.join(__dirname, 'www/cmn/css'), filename: '[name].css' }, module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader?-url&minimize&sourceMap', 'sass-loader?outputStyle=expanded&sourceMap' ] }) } ] }, plugins: [ new ExtractTextPlugin('[name].css'), new BrowserSyncPlugin({ host: 'localhost', port: 3000, server: { baseDir: ['www'] }, files: [ 'www/*.css', 'www/*.html' ] }) ] };

■Brackets sass
全ブラウザ: outputStyle=expandedで正常に出る
ただし、outputStyleをcompressedにするとズレる

// .brackets.json { "path": { "src/scss/style.scss": { "sass.enabled": true, "sass.options": { "includePaths": ["*.scss"], "outputDir": "../../www/cmn/css/", "imagePath": null, "sourceComments": "map", "outputStyle": "expanded" }, "linting.collapsed": true } } }

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

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

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

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

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

guest

回答2

0

sass自体の機能でcompressedにするとなぜかずれるようです。

https://qiita.com/kyaido/items/04658c04a7dbe9f05c16

上記、記事ではCSSの圧縮にminify-cssを使われてますが、現在は非推奨でclean-cssを使うのが良さそうです。

http://takedajs.hatenablog.jp/entry/2016/11/23/115457

投稿2017/11/10 05:21

編集2017/11/10 05:22
raidomaru

総合スコア106

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

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

kumakuma112t

2017/11/21 03:05

sassのoutputをcompressedをすると確かにずれますね。 gulpのやり方はわかりました。 他のものも、sassのoutputをcompressedにしてるのが原因の可能性がでてきたので、調べてみます。
guest

0

下記のルールにすることで、なんとか使えるレベルになりました。
■outputStyleをexpandedする
■主要な記述はinport側のファイルに書かない
■extendを多用しない

common.scss
|-- _base.scss
|-- _function.scss
|-- normalize.scss

パーツごとにscssを分けるような案件では役に立たないので、解決策ないでしょうか

投稿2017/11/01 02:00

kumakuma112t

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問