application.scss silently breaks javascript

Question

application.scss silently breaks javascript

JoseMPena opened this issue 6 years ago · comments

versions & Setup

pachages.json

"dependencies": {
    "@rails/webpacker": "^3.2.2",
    "rails-ujs": "^5.1.5",
    "stimulus": "^1.0.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.11.1"
  }

Gemfile.lock

komponent (1.1.3)
      webpacker (>= 3.0.0)

application.html.erb

<%= stylesheet_pack_tag    'application' %>

frontent/packs/application.js

import "rails-ujs";
import 'components';
console.log("Hello world");

Steps to Reproduce:

A)

Create an empty file: frontent/packs/application.scss
Launch servers

Expected: "Hello World" to be displayed in console
Actual: No "Hello World" message even tho compilation finishes with no error.

B)

Rename file frontent/packs/application.scss to frontent/packs/application.css
Launch servers

Expected: "Hello World" to be displayed in console
Actual: Success!

Note

webpack-dev-server has to be restarted between changes to see the issue.

Hans Lemuet · Answer 1 · Tue Mar 06 2018 19:52:31 GMT+0800 (China Standard Time)

Thank you for the bug report, we'll investigate.

Hans Lemuet · Answer 2 · Tue Mar 06 2018 20:21:46 GMT+0800 (China Standard Time)

It may be related to webpack-contrib/sass-loader#403

Hans Lemuet · Answer 3 · Tue Mar 06 2018 20:36:26 GMT+0800 (China Standard Time)

@JoseMPena can you check which version of sass-loader is installed? (see yarn.lock)

JoseMPena · Answer 4 · Tue Mar 06 2018 21:20:45 GMT+0800 (China Standard Time)

@Spone

sass-loader@^6.0.6:
  version "6.0.6"
  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
  dependencies:
    async "^2.1.5"
    clone-deep "^0.3.0"
    loader-utils "^1.0.1"
    lodash.tail "^4.1.1"
    pify "^3.0.0"

Hans Lemuet · Answer 5 · Tue Mar 06 2018 22:06:29 GMT+0800 (China Standard Time)

That is weird because it's supposed to be fixed with sass-loader 6.0.3

I'm not sure it an issue with Komponent.

Do you reproduce it without komponent, only webpacker and sass-loader?

Florent FERRY · Answer 6 · Wed Mar 07 2018 04:30:28 GMT+0800 (China Standard Time)

Hello @JoseMPena,

This issue is not related with Komponent. I made some investigation on it, seems using application.scss pack is not the recommended way. The official Webpacker guide and issues related to that point are pretty confusing.

You have two possibilities:

Create your file in app/javascript/packs/src/application.scss
Add stylesheet_pack_tag 'application' in your template
Add import "./src/application.scss"; in your app/javascript/packs/application.js

or

Create your file in app/javascript/packs/application.css
Add stylesheet_pack_tag 'application' in your template

I am closing this issue. Feel free to open an issue on Webpacker to be more explicit about that point.

JoseMPena · Answer 7 · Wed Mar 07 2018 18:01:29 GMT+0800 (China Standard Time)

I just found a workaround. Moving application.scss from frontend/packs somewhere else, say, frontend/support and just require it in application.js

import "../support/application.scss";

And it all works like a charm :)

JoseMPena · Answer 8 · Wed Mar 07 2018 18:04:43 GMT+0800 (China Standard Time)

@florentferry I posted the previous comment before refreshing this page 😝