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)
预处理所有这些文件以添加波浪号是可接受的解决方案吗?如果是这样,您可以对单个文件执行此操作,就像在 *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 任务或脚本中。
| 归档时间: |
|
| 查看次数: |
504 次 |
| 最近记录: |