带有 Vue 和 webpacker 3 的 Rails 5.1 应用程序，未编译 css

Posted 2023-02-22

【中文标题】带有 Vue 和 webpacker 3 的 Rails 5.1 应用程序，未编译 css

【英文标题】：Rails 5.1 app with Vue and webpacker 3, css not compiled

【发布时间】：2018-04-23 16:23:26

【问题描述】：

我正在尝试将 Element UI 添加到我的 Vue 应用程序中。 我按照快速入门教程进行操作，我有我的 application.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/it'
import App from '../app.vue'

Vue.use(ElementUI,  locale )

document.addEventListener('DOMContentLoaded', () => 
  document.body.appendChild(document.createElement('app'))
  const app = new Vue(App).$mount('app')

  console.log(app)
)

我正在导入 CSS，我也有

<%= stylesheet_link_tag 'application' %>

在我的布局里面，但是这个文件是空的，没有样式。 该应用程序正在运行，但没有 CSS。 我的错在哪里？

【问题讨论】：

也许这个搜索查询可以提供帮助？ duckduckgo.com/…

不，我遵循每个教程。问题是 CSS 编译

所以你用import 语句导入css？

我关注这个github.com/rails/webpacker/issues/775

@FabrizioBertoglio 我使用 stylesheet_link_tag 而不是 stylesheet_pack_tag

【参考方案1】：

问题出在导入方法上

使用

<%= stylesheet_pack_tag 'application', media: 'all' %>

代替

<%= stylesheet_link_tag 'application' %>

基于：https://github.com/rails/webpacker/issues/987

【讨论】：

或两者兼有，以防您仍然使用 Rails 资产样式表