Поддержка Sass в Rails 5.2 с webpacker 3+ прямо в JS

Я хочу включить поддержку SASS в новое приложение Rails, напрямую импортируя файл .scss в мои файлы Javascript.

До сих пор это то, что я сделал:

1- Следуйте https://github.com/rails/webpacker, чтобы создать новое приложение webpacker rails с интеграцией реакции. Привет, мир был успешным.

У меня есть точка входа для Webpacker в папке packs

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 — компонент «Мой привет, мир»

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

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

export default Hello;

4 - Мой файл sass

.red {
  background-color: red;
}

5 - вид

<%= javascript_pack_tag 'hello_world_pack' %>

6 - шаблон макета

<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?

ПРИМЕЧАНИЕ. Я мог бы успешно добавить поддержку SASS, но добавив файл my_stylehseet.scss непосредственно в папку pack и сославшись на него в моем шаблоне макета с помощью `‹% = stylesheet_pack_tag 'my_stylesheet %>'. Но я хочу, чтобы мой шаблон не зависел от таблиц стилей, и мне не нужно было иметь их несколько.

Я действительно думаю, что есть более элегантный способ. Если я правильно понял webpacker doc https://github.com/rails/webpacker/blob/master/docs/css.md Может быть, я ошибаюсь?


ruby-on-rails sass webpacker
person Vicens Fayos    schedule 07.07.2018    source источник
comment
Я узнал, что на этот вопрос уже был дан ответ здесь stackoverflow.com/questions/46257346/ на самом деле документация webPacker указывала на решение, и я был довольно близок. нам нужно включить файл CSS в папку пакета   -  person Vicens Fayos    schedule 07.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

Просто для записей на вопрос уже дан ответ здесь Rails Webpacker Импорт CSS-файла 3.0 не работает, и в документации по веб-упаковщику об этом ясно написано https://github.com/rails/webpacker/blob/master/docs/css.md

person Vicens Fayos    schedule 07.07.2018