gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 03:38:31 24 4
gpt4 key购买 nike

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

到目前为止,这是我所做的:

1- 按照 https://github.com/rails/webpacker 创建一个带有 React 集成的新 webpacker rails 应用程序。 Hello world 成功。

我在 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 支持,但直接在 pack 文件夹中添加一个 my_stylehseet.scss 文件并将其引用到我的布局模板中使用`<% = stylesheet_pack_tag 'my_stylesheet %>'。但我希望我的模板是样式表不可知论者,我不必拥有多个样式表。

我真的认为有一个更优雅的方式如果我正确理解 webpacker doc https://github.com/rails/webpacker/blob/master/docs/css.md也许我错了?

最佳答案

仅供记录,问题已在此处回答Rails Webpacker 3.0 import CSS file is not working并且 webpacker 文档对此很清楚 https://github.com/rails/webpacker/blob/master/docs/css.md

关于ruby-on-rails - Rails 5.2 中的 Sass 支持直接在 JS 中使用 webpacker 3+,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51221274/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com