Question

如何使用webpacker在Rails 5.2应用程序中设置Foundation scss和JavaScript？

这是我到目前为止所做的：

使用webpack选项创建新的Rails应用程序：

rails new myapp --webpack

进行webpacker设置：

rails webpacker:install

添加“网站基础”：

yarn add jquery foundation-sites

从那里我对放置文件的正确位置，要添加的配置以及应该放置的位置一无所知。我有点期待在某个地方看到webpack.config.js文件。我在webpacker readme中看到有app/javascript/src/application.css文件。我是否只是从那里开始引用其他文件，它们最终都会一起被编译/串联在一起？

Answer 1

将此答案放在此处以供其他人查看。它主要基于@jdgray提供的the link。

使用webpacker创建一个新的Rails应用程序：

rails new myapp --webpack

无论如何，您都不需要手动运行rails webpacker:install，因为我最初想像它是从先前的命令运行的。

将目录更改为Rails应用并添加Foundation（以及jquery，这是Foundation插件所需的）：

yarn add jquery foundation-sites

这将使您拥有能够使用Webpack的应用程序，但实际上尚未使用任何东西。

大部分内容都将保存在新的app/javascript目录中，但是在其中不仅仅添加javascript时，对其进行重命名是很有意义的。

将其重命名为app/webpack，然后编辑config/webpacker.yml，将default.source_path的值也更改为app/webpack。当然可以使用任何名称，但是webpack似乎是一个不错的选择。那个配置看起来像这样：

default: &default
    source_path: app/webpack
    source_entry_path: packs
    public_output_path: packs
    cache_path: tmp/cache/webpacker

Webpacker使用“包”作为入口点添加到视图/布局。在app/webpack/packs目录中，您应该已经有application.js。在stylesheets.scss中创建一个名为app/webpack/packs的文件来处理样式表。更多内容将在以后添加。

接下来，创建目录app/webpack/src/javascript和app/webpack/src/stylesheets，这将是放置所有常用javascript和scss代码的地方。

要设置一些基础知识，请创建目录app/webpack/src/stylesheets/foundation_config，并在其中创建文件foundation.scss。在该文件中放入以下行，这些行将参考基础并提供一些特定的基础功能：

@import '~foundation-sites/scss/foundation.scss';
@include foundation-global-styles;
@include foundation-grid;

仅凭这个新的foundation.scss文件就什么也做不了，需要由包进行引用。将以下行添加到app/webpack/packs/stylesheets.scss：

@import '../src/stylesheets/foundation_config/foundation'

现在，您有了一个打包文件，该文件将加载您的源文件，这将加载基础。最后要做的是在布局中使用该打包文件。在app/views/layouts/application.html.erb的head标签中添加以下行：

<%= stylesheet_pack_tag 'stylesheets' %>

所有这些，Fondation将通过webpacker运行。该结构当然也允许使用样式表的任何其他javascript，但是这个问题仅与Foundation有关，所以我在这里停止。再次感谢@jdgray！

使用Webpacker在Rails 5.2上进行基础scss

1 个答案: