时间戳

首页 > 解决方案 > 直接在 JS 中使用 webpacker 3+ 在 Rails 5.2 中支持 Sass

ruby-on-rails - 直接在 JS 中使用 webpacker 3+ 在 Rails 5.2 中支持 Sass

问题描述

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

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

1- 按照https://github.com/rails/webpacker创建一个新的带有反应集成的 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 dochttps://github.com/rails/webpacker/blob/master/docs/css.md 也许我错了吗？

标签： ruby-on-railssasswebpacker

解决方案

只是为了记录，这里已经回答了这个问题Rails Webpacker 3.0 import CSS file is not working并且 webpacker 文档很清楚https://github.com/rails/webpacker/blob/master/docs/css.md

推荐阅读