Tag: webpacker

Rails Webpacker 3.0导入CSS文件不起作用: 我正在使用Webpacker工作Rails5项目，以便正确运行React 但是当我在我的根组件中import我的css文件时，它似乎根本不起作用。看起来样式表根本就没有了。这是我的根组件 import React from ‘react’ import ReactDOM from ‘react-dom’ import StartForm from ‘./insurance_form/start_form’ //import PropTypes from ‘prop-types’ import ‘react-datepicker/dist/react-datepicker.css’; // not working ReactDOM.render( , document.getElementById(‘start-form-index-container’) ) 这是我的webpack/environment.js const { environment } = require(‘@rails/webpacker’) const merge = require(‘webpack-merge’) const myCssLoaderOptions = { modules: true, sourceMap: true, localIdentName: ‘[name]__[local]___[hash:base64:5]’ } const CSSLoader = environment.loaders.get(‘style’).use.find(el […]

Vue.js应用程序在开发中工作，但没有使用Rails 5.2.0 / Webpacker在生产中安装模板 – 空白屏幕在控制台中没有错误: 我正在使用Rails 5.2.0和Webpacker gem来部署Vue应用程序。 show.html.erb文件非常简单：然后在我的入口包中，打包/ my_vue_app.js： import TurbolinksAdapter from ‘vue-turbolinks’; import Vue from ‘vue/dist/vue.esm’ Vue.use(TurbolinksAdapter); import MyComponent from ‘../components/my_app/index.vue’ document.addEventListener(‘turbolinks:load’, () => { var element = $(‘[data-behavior=”vue-app”]’); if(!element) { return }; console.log(‘Initializing Vue’); const app = new Vue({ el: element[0], data: { }, components: { MyComponent } }) }) 在开发中，一切都很好。该应用程序已安装并正常运行。但是在生产中，在页面加载和JS运行之后，将从分页中删除，只留下。在控制台中，绝对没有错误。 […]

将数据从Rails视图传递到webpacker中的VueJS组件: 我正在尝试使用Rails 5.1的新webpacker gem以及VueJS，但无法获取我的erb视图以将数据传递给VueJS组件…… 假设我有一个用户显示视图 # view/users/show.html.erb 而我的javascript： // app/javascript/packs/user-card.js require(“user-card”) // app/javascript/user-card/index.js import Vue from ‘vue/dist/vue.esm’ import UserCard from ‘./components/UserCard’ document.addEventListener(‘DOMContentLoaded’, () => { let element = document.getElementById(“user-card”) let username = element.dataset.username console.log(username); // => “pecpec” const app = new Vue({ el: element, template: ”, components: { UserCard }, data () { return { username […]

使用webpack从react-rails应用程序中的node_modules加载字体: 我有一个使用webpacker设置的react-rails应用程序。我正在尝试使用node_modules中的字体加载font-awesome-pro。我认为这是一项微不足道的任务，但我似乎无法找到关于如何做到这一点的任何好的文档。这是我到目前为止： package.json依赖项： “dependencies”: { “@rails/webpacker”: “3.5”, “babel-preset-react”: “^6.24.1”, “bootstrap”: “^4.1.3”, “prop-types”: “^15.6.2”, “react”: “^16.5.2”, “react-dom”: “^16.5.2”, “react-slick”: “^0.23.1”, “react_ujs”: “^2.4.4”, “slick-carousel”: “^1.8.1”, “tachyons-z-index”: “^1.0.9” }, “devDependencies”: { “@fortawesome/fontawesome-pro”: “^5.2.0”, “babel-plugin-transform-class-properties”: “^6.24.1”, “babel-preset-env”: “^1.7.0”, “file-loader”: “^2.0.0”, “path”: “^0.12.7”, “webpack-dev-server”: “2.11.2” } file.js： var path = require(‘path’); module.exports = { test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, exclude: path.resolve(__dirname, […]