CODEWITHSUNDEEP
ruby-on-railssasswebpacker
Vicens Fayos
Vicens Fayos

Reputation: 760

Sass support in Rails 5.2 with webpacker 3+ directly in JS

I want to include SASS support in a brand new Rails App directly importing the .scss file on my Javascript files.

So far this is what I have done:

1- Follow https://github.com/rails/webpacker to create a new webpacker rails app with react integrations. Hello world was succesfull.

I have a entry point for Webpacker in packs folder

import ReactDOM from "react-dom";
import Hello from "../hello_world";

    document.addEventListener("DOMContentLoaded", () => {
      ReactDOM.render(
        <Hello name="React" />,
        document.body.appendChild(document.createElement("div"))
      );
    });

3 - My Hello world component

import React from "react";
import "./test.scss";

const Hello = props => <div className="red">Hello {props.name}!</div>;

export default Hello;

4 - My sass file

.red {
  background-color: red;
}

5 - view

<%= javascript_pack_tag 'hello_world_pack' %>

6 - layout template

<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

No complaints at all but Red color is not applied. What I overlook?

NOTE: Successfully I could add SASS support but adding a my_stylehseet.scss file directly in pack folder and referencing it into my layout template with `<% = stylesheet_pack_tag 'my_stylesheet %>'. But I want that my template is stylesheet agnostic s I don't have to have severals of them.

I really think there is an more elegant way If I understood properly webpacker doc https://github.com/rails/webpacker/blob/master/docs/css.md Maybe Am I wrong?

Upvotes: 3

Views: 1236

Answers (1)

Vicens Fayos
Vicens Fayos

Reputation: 760

Just for the records the question is already answered here Rails Webpacker 3.0 import CSS file is not working and the webpacker documentation is clear about it https://github.com/rails/webpacker/blob/master/docs/css.md

Upvotes: 1

Related Questions