node_modules CSS 文件未在生产 Webpacker 中编译答案

【问题标题】：node_modules CSS files not compiling in production Webpackernode_modules CSS 文件未在生产 Webpacker 中编译
【发布时间】：2020-12-29 09:57:21
【问题描述】：

我正在开发一个 Rails 应用程序，我正在使用 font-awesome 免费的 npm 包。我在applcation.js 包中包含了字体很棒的资产：

require("@rails/ujs").start();
require("@rails/activestorage").start();
require("@fortawesome/fontawesome-free/js/all"); // this line

在开发和生产中一切正常。

然后我添加了另一个包splideJS，其中包含node_modules 中的一个CSS 文件。我已经在 application.js 包中导入了 css 文件，比如 fontawesome：

require("@rails/ujs").start();
require("@rails/activestorage").start();
require("@fortawesome/fontawesome-free/js/all");
require("@splidejs/splide/dist/css/splide.min");

这适用于开发，但不适用于生产。为什么？

我的想法是 webpacker 只编译 js 文件，而不是生产中的 CSS。所以我尝试使用stylesheet_pack_tag 让webpacker 编译CSS 文件，并在packs 文件夹中创建application.scss 文件。

// packs/application.scss
@import "@splidejs/splide/dist/css/splide.min";

// application.html.haml
= stylesheet_pack_tag "application", media: "all"

现在 webpacker 正在编译 splideJS 样式表，它正在生产中工作。但是 font-awesome 停止工作。 为什么？

另一个问题，webpacker.yml 中的这条线是干什么用的？仅在生产中设置为false，我尝试将其更改为true，但它也不起作用。

# Production depends on precompilation of packs prior to booting for performance.
compile: false

【问题讨论】：

标签： css ruby-on-rails font-awesome webpacker

【解决方案1】：

我不知道这是否会对您有所帮助，但我在 Rails 6 上导入 Splide（在开发和产品上工作）的方式是使用 application.js 上的“导入”选项并安装它：

import Splide from '@splidejs/splide';
document.addEventListener('turbolinks:load', () => {
  // Call your functions here, e.g:
  // initSelect2();
  new Splide( '.splide' ).mount();
});

对于 CSS，我像你在 application.scss 上所做的那样导入：

@import "@splidejs/splide/dist/css/splide.min";

我希望这可以帮助你。最好的！

【讨论】：