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 } } }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/21 03:05