gpt4 book ai didi

ruby-on-rails - 如何在没有 tilda 的情况下从 node_modules 导入 scss 文件?

转载 作者:行者123 更新时间:2023-12-04 15:50:25 25 4
gpt4 key购买 nike

我使用以下方法创建了一个新的 rails 应用程序:

rails new blah --webpack -T

然后我添加了 primer
yarn add primer

如果我在/assets/stylesheets/application.scss 中执行此操作,我的导入将有效

@import "~primer/index.scss";

Primer 有很多模块,因此primer/index.scss 然后引用其他模块的文件。因此,即使我将 tilda 放在第一次导入中,它也不能解决问题,因为在其他文件中它没有 tilda。

但问题是,一旦 index.scss 文件加载,还有其他文件停止工作,因为它们也引用了如下文件:
// Core modules
@import "primer-base/index.scss";
@import "primer-box/index.scss";
@import "primer-breadcrumb/index.scss";
@import "primer-buttons/index.scss";
@import "primer-table-object/index.scss";
@import "primer-forms/index.scss";
@import "primer-layout/index.scss";
@import "primer-navigation/index.scss";
@import "primer-pagination/index.scss";
@import "primer-tooltips/index.scss";
@import "primer-truncate/index.scss";

所以这些进口也必须改变。我需要解决这个问题,所以我不必使用 tilda 符号作为前缀。我的 assets.rb 已经包含 node_modules 所以我不确定我还能做什么?

我的/initializers/assets.rb 有这个:
Rails.application.config.assets.paths << Rails.root.join('node_modules')

然而,在我的 application.scss 文件中,我必须包含 tilda 符号才能引用 scss 文件:
@import "primer/index.scss";
html {
font-size: 30px;
}

应用程序.js 文件:
import "./application.scss";

console.log('Hello World from Webpacker2d');

我的布局文件:
<!DOCTYPE html>
<html>
<head>
<title>Blah</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
</head>

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

最佳答案

预处理所有这些文件以添加波浪号是一个可接受的解决方案吗?如果是这样,您可以在 *nix 机器中对单个文件执行此操作:

cat some_file.scss | ruby -ne 'print $_.sub(/(@import\s*\")([^~])/) { "#{$1}~#{$2}" }' > some_file.scss.tilde
mv some_file.scss.tilde some_file.scss

对于多个文件:
for file in $(ls *.scss); do
cat "$file" | ruby -ne 'print $_.sub(/(@import\s*\")([^~])/) { "#{$1}~#{$2}" }' > "$file.tilde"
mv "$file".tilde "$file"
done

这会将您的 scss 文件替换为在任何 @import 中添加波浪号的版本。尚未拥有它的声明。更具体地说,它匹配 @import后跟任何空格,后跟双引号,后跟不是波浪号的东西,并在那个不是波浪号的东西之前放一个波浪号。

您可能想跳过 mv行首先测试输出。

如果您必须多次执行此操作,则可以将其写入 rake 任务或脚本中。

关于ruby-on-rails - 如何在没有 tilda 的情况下从 node_modules 导入 scss 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52731269/

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