Question

我使用以下命令创建了一个新的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;
}

application.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>

Answer 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

对于多个文件：

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

这将用一个将波浪号添加到尚无波浪号的@import声明中的版本替换您的scss文件。更具体地说，它与@import匹配，后跟任何空格，后跟双引号，然后再加上一个非代字号，然后将一个代字号放在那个非代字号之前。

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

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

Answer 2

不确定为什么要分别导入节点模块文件。

最好的使用方法如下：

npm链接my-react-lib

现在，我们可以创建一个文件并导入该库：

vim app / javascript / packs / my-react-component.jsx

import React from 'react' 
import ReactDOM from 'react-dom' 
import MyReactLib from 'my-react-lib'

document.addEventListener('DOMContentLoaded', () => {   ReactDOM.render(
        <MyReactLib />,
        document.body.appendChild(document.createElement('div')),   ) })

现在，我们只需更改pack标签即可使用my-react-component。并刷新我们的webpack开发服务器。

<h1>Pages#index</h1> 
<p>Find me in app/views/pages/index.html.erb</p>

<p>Here we will import our React Component using javascript_pack_tag: </p> <%= javascript_pack_tag 'my-react-component' %>

它有效！

Answer 3

我刚刚摆脱了简单的解决方案。由于已经安装了Webpack。

为此需要安装Foreman。基本上其余部分是相同的，除了我不将turbolinks与webpack一起使用。

foreman start -f ./Procfile.dev

# Procfile.dev
web: bundle exec puma -p 3000 -e ${RACK_ENV:-development}
webpacker: ./bin/webpack-dev-server
log: tail -f ./log/development.log

如何从没有tilda的node_modules导入scss文件？

3 个答案: