如何解决无法在生产Webpacker中编译node_modules CSS文件
我正在使用Rails应用程序,该应用程序使用的是字体真棒的免费npm软件包。
我在'a
包中包含了超棒的字体资源:
applcation.js
在开发和生产中一切都很好。
然后,我添加了另一个软件包require("@rails/ujs").start();
require("@rails/activestorage").start();
require("@fortawesome/fontawesome-free/js/all"); // this line
,该软件包在splideJS
中包含一个CSS文件。我已将node_modules
包中的css文件导入为fontawesome:
application.js
这对开发有效,但不适用于生产。为什么?
我的想法是,webpacker只编译js文件,而不编译生产中的CSS。因此,我尝试使用require("@rails/ujs").start();
require("@rails/activestorage").start();
require("@fortawesome/fontawesome-free/js/all");
require("@splidejs/splide/dist/css/splide.min");
使webpacker编译CSS文件,并在stylesheet_pack_tag
文件夹中创建application.scss
文件。
packs
现在,webpacker正在编译splideJS样式表,并且正在生产中。 但字体真棒停止工作。 为什么?
另一个问题,// packs/application.scss
@import "@splidejs/splide/dist/css/splide.min";
// application.html.haml
= stylesheet_pack_tag "application",media: "all"
中的这行是什么?只能在生产中将其设置为false,我尝试将其更改为true,但也无效。
webpacker.yml
解决方法
我不知道这是否对您有帮助,但是我导入Splide on Rails 6(在dev和prod上工作)的方式是在application.js上使用“ import”选项并将其安装:
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";
希望这对您有所帮助。 最好!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。