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

Bla*_*man 6 ruby-on-rails sass webpacker

我创建了一个新的rails应用程序:

rails new blah --webpack -T
Run Code Online (Sandbox Code Playgroud)

然后我加入了底漆

yarn add primer
Run Code Online (Sandbox Code Playgroud)

如果我在/assets/stylesheets/application.scss中这样做,我的导入工作

@import"~introdunts/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";
Run Code Online (Sandbox Code Playgroud)

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

我的/initializers/assets.rb有这个:

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Run Code Online (Sandbox Code Playgroud)

然而在我的application.scss文件中,我必须包含tilda标志来引用scss文件:

@import "primer/index.scss";
html {
  font-size: 30px;
}
Run Code Online (Sandbox Code Playgroud)

application.js文件:

import "./application.scss";

console.log('Hello World from Webpacker2d');
Run Code Online (Sandbox Code Playgroud)

我的布局文件:

<!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>
Run Code Online (Sandbox Code Playgroud)

And*_*rtz 1

预处理所有这些文件以添加波浪号是可接受的解决方案吗?如果是这样,您可以对单个文件执行此操作,就像在 *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
Run Code Online (Sandbox Code Playgroud)

对于多个文件:

for file in $(ls *.scss); do
    cat "$file" | ruby -ne 'print $_.sub(/(@import\s*\")([^~])/) { "#{$1}~#{$2}" }' > "$file.tilde"
    mv "$file".tilde "$file"
done
Run Code Online (Sandbox Code Playgroud)

这会将您的 scss 文件替换为一个版本,该版本会向任何@import尚未包含波浪号的声明添加波浪号。更具体地说,它匹配@import后跟任何空格,后跟双引号,后跟非波浪号的内容,并在非波浪号的前面放置一个波浪号。

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

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