使用Webpacker在Rails 5.2上进行基础测试

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自述app/javascript/src/application.css文件中看到有文件.我是否只是从那里开始引用其他文件,它们最终会被编译/连接在一起？

Answer 1

把这个答案放在这里供别人看.它主要基于@jdgray提供的链接.

使用webpacker创建一个新的rails应用程序:

rails new myapp --webpack

您不需要rails webpacker:install像我最初想的那样手动运行,因为它无论如何都会从先前的命令运行.

将目录更改为rails应用程序并添加Foundation(以及基础插件所需的jquery):

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.scssin 的文件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'

现在你有了一个pack文件,它将加载你的源文件,它会加载基础.最后要做的是在布局中使用该包文件.在app/views/layouts/application.html.erbhead标记中添加以下行:

<%= stylesheet_pack_tag 'stylesheets' %>

有了这些,Fondation将通过webpacker工作.该结构当然也允许使用任何其他样式表的javascript,但这个问题只是关于基金会,所以我会停在这里.再次感谢@jdgray!