Question

我想在全新的Rails应用程序中包含SASS支持，直接在我的Javascript文件中导入.scss文件。

到目前为止，这是我所做的：

1-按照https://github.com/rails/webpacker创建一个具有react集成的新webpacker rails应用程序。你好，世界成功了。

我在packs文件夹中有一个Webpacker的入口点

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-我的Hello world组件

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>

除了Red颜色以外，没有任何其他抱怨。我忽略了什么？

注意：成功地，我可以添加SASS支持，但直接在my_stylehseet.scss文件夹中添加一个pack文件，并使用`<％= stylesheet_pack_tag'my_stylesheet将其引用到我的布局模板中％>”。但是我希望我的模板与样式表无关，而不必包含多个样式表。

我真的认为，如果我能正确理解webpacker doc https://github.com/rails/webpacker/blob/master/docs/css.md，这是一种更优雅的方法也许我错了吗？

Answer 1

仅出于记录目的，这里Rails Webpacker 3.0 import CSS file is not working已经回答了该问题，并且webpacker文档对此也很清楚https://github.com/rails/webpacker/blob/master/docs/css.md

直接在JS中使用Webpacker 3+在Rails 5.2中提供Sass支持

1 个答案: