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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Sass

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

Q&A

解決済

1回答

3350閲覧

[Rails][Sass] @importを使った場合、SourceMapが正しく解釈されない

stimlocy

総合スコア11

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Sass

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

0グッド

0クリップ

投稿2020/07/09 05:20

編集2020/07/10 01:43

環境

Rails 6.0.3.2
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin18]

gem

1### Gemfile 2source 'https://rubygems.org' 3git_source(:github) { |repo| "https://github.com/#{repo}.git" } 4 5ruby '2.6.5' 6 7# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 8gem 'rails', '~> 6.0.3', '>= 6.0.3.2' 9# Use sqlite3 as the database for Active Record 10gem 'sqlite3', '~> 1.4' 11# Use Puma as the app server 12gem 'puma', '~> 4.1' 13# Use SCSS for stylesheets 14gem 'sass-rails', '>= 6' 15# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker 16gem 'webpacker', '~> 4.0' 17# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 18# gem 'turbolinks', '~> 5' 19# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 20gem 'jbuilder', '~> 2.7' 21# Use Redis adapter to run Action Cable in production 22# gem 'redis', '~> 4.0' 23# Use Active Model has_secure_password 24# gem 'bcrypt', '~> 3.1.7' 25 26# Use Active Storage variant 27# gem 'image_processing', '~> 1.2' 28 29# Reduces boot times through caching; required in config/boot.rb 30gem 'bootsnap', '>= 1.4.2', require: false 31 32group :development, :test do 33 # Call 'byebug' anywhere in the code to stop execution and get a debugger console 34 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 35end 36 37group :development do 38 # Access an interactive console on exception pages or by calling 'console' anywhere in the code. 39 gem 'web-console', '>= 3.3.0' 40 gem 'listen', '~> 3.2' 41 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 42 gem 'spring' 43 gem 'spring-watcher-listen', '~> 2.0.0' 44end 45 46group :test do 47 # Adds support for Capybara system testing and selenium driver 48 gem 'capybara', '>= 2.15' 49 gem 'selenium-webdriver' 50 # Easy installation and use of web drivers to run system tests with browsers 51 gem 'webdrivers' 52end 53 54# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 55gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

json

1### package.json 2{ 3 "name": "sass_test", 4 "private": true, 5 "dependencies": { 6 "@rails/actioncable": "^6.0.0", 7 "@rails/activestorage": "^6.0.0", 8 "@rails/ujs": "^6.0.0", 9 "@rails/webpacker": "4.2.2" 10 }, 11 "version": "0.1.0", 12 "devDependencies": { 13 "webpack-dev-server": "^3.11.0" 14 } 15}

問題のファイル構成について

問題のcssファイルは以下の構成です

stylesheets

1app 2 |-- assets 3 |-- stylesheets 4 |-- application.css 5 |-- common.scss 6 |-- reset.scss 7 |-- scaffold.scss 8 |-- partial 9 |-- _value.scss

application.css

css

1/* 2 *= require reset.css 3 *= require scaffolds.css 4 *= require common.css 5 *= require_directory . 6 *= require_self 7 */

common.scss

scss

1@import "./partial/values"; 2 3* { box-sizing: border-box; } 4 5html, body { 6 margin: 0; 7 padding: 0; 8 font-family: sans-serif; 9 font-size: 16px; 10 text-align: justify; 11} 12 13h1, h2, h3, h4, h5, h6 { 14 color: red; 15}

_value.scss

scss

1@for $i from 1 through 50 { // 1, 2, 3 ... 50 2 .w-#{$i}em { width: #{$i}em !important; } 3 .h-#{$i}em { height: #{$i}em !important; } 4}

発生している内容

chromeのデベロッパーツールで、scssの行を確認しようとすると、実際の行とは違う位置を示しています。
develop-tool
イメージ説明

_value.scssで実際にCSSとして書き出されるのは399行です。
common.scssでh1, h2, h3 ...が記述されているのは14~16行ですから、_value.scssがcommon.scss内に展開されたような行数で反映されてしまっています。

@importを利用せず、application.cssで以下のように記述すると、正しい行数を示すようになります。

css

1/* 2 *= require reset.css 3 *= require scaffolds.css 4 *= require partial/_values.css 5 *= require common.css 6 *= require_directory . 7 *= require_self 8 */

また、デベロッパーツールでSourcesの「Enable CSS source maps」を外し、SourceMapを解釈しないようにすれば、正しい行位置を示すようになります。
イメージ説明
イメージ説明
イメージ説明

期待する解決

scssファイル内で@importを利用した上で、chromeのデベロッパーツールがSouceMapを正しい解釈をして行位置を示すようにしたいのです。

全てapplication.cssで記述すれば正しくは動くのですが、その場合はsassのPartialを利用した管理方法や、特定のセレクタにネストさせるような展開方法が利用できません。

これを解決する方法はありますか?
また、この問題はscssをコンパイルしているgemの問題か、sourcemapを解釈しようとするchromeの問題でしょうか?

試行錯誤

gem "sass-rails"を除き、gem "sassc-rails"に追加して
https://github.com/sass/sassc-rails#inline-source-maps
を実施しましたが、特に変化はありませんでした。

https://github.com/rails/sprockets/issues/656
上記URLは、sass-railsが依存している?sprocketsのもので、今回の問題とは微妙に違いますが、なにか関係があるかもしれません。
@importの場合で上手く読むことが出来ない、という点では共通しているかと思われます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Railsには、Ssasの @import によるファイルのインポートとは別で、アセットパイプラインというCSSやJSなどのアセットを結合する機能(sprockets-rails)が備わっています。

application.css

css

1/* 2 *= require reset.css 3 *= require scaffolds.css 4 *= require common.css 5 *= require_directory . 6 *= require_self 7 */

この指定がアセットパイプラインを使用してファイルを結合するマニフェストになっていて、これがSass/SCSSの@importと二重に動作している状況が現在の問題を引き起こしているように思います。

本来は、アセットパイプラインはSass/SCSSの @import と混在させて運用するべきではありません。
Railsガイドでも以下のように注意をしています

Sassファイルを複数使用しているのであれば、Sprocketsディレクティブで読み込まずにSass @importルールを使用する必要があります。このような場合にSprocketsディレクティブを使用してしまうと、Sassファイルが自分自身のスコープに置かれるため、その中で定義されている変数やミックスインが他のSassから利用できなくなってしまいます。

アセットパイプライン - Railsガイド

Sass/SCSSらしく @import を使ってパーシャルに書いた変数やmixinを別ファイルで展開する運用をしたいのでしたら、Sprocketsが結合してしまわないように除外した方がいいと思います。

以下参考にしてみてください

投稿2020/07/22 12:42

archetypes.k

総合スコア37

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

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

stimlocy

2020/08/04 05:16

ありがとうございます。 SprocketsからWebpackerに移行し、sass-loaderでsourceMapオプションを追加することで、解決できました。 Webpackerに移行しただけでは、CSSのsourceMapが有効にならず sass-loaderを設定するのにだいぶ手間取りました。 # scssファイル移動 app/assets/stylesheets → app/javascript/stylesheets ```javascript // app/javascript/packs/application.js import '../javascripts/application'; import '../stylesheets/application'; ``` ```html.erb <!-- app/views/layouts/application.html.erb --> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> ``` # Webpackの設定 package.json ```json { "name": "sass_test", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.2.2", "source-map": "^0.7.3", "webpack-sources": "^1.4.3" }, "version": "0.1.0", "devDependencies": { "fibers": "^5.0.0", "sass": "^1.26.10", "sass-loader": "^7.2.0", "webpack": "^4.44.1", "webpack-dev-server": "^3.11.0", "webpack-merge": "^5.1.0" } } ``` ```javascript // app/config/webpack/environment.js const { environment } = require('@rails/webpacker') const { merge } = require('webpack-merge'); const SassLoader = environment.loaders.get('sass').use.find(el => el.loader === 'sass-loader') SassLoader.options = merge(SassLoader.options, { sourceMap: true, implementation: require('sass'), fiber: require('fibers') }) module.exports = environment ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問