When rails imports css using webpacker, it imports invalid questions.

Rails uses webpacker to write vue programs, and when importing css in js, the import is invalid.

at first, the import failed, and the import file definition of scss was not found when it was introduced. Try to put the defined code in the corresponding file, and the compilation passes, but there is no import effect.

related codes

app/javascript/packs/admin/main.js

import Vue from "vue/dist/vue.esm";
import router from "./routes";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import locale from "element-ui/lib/locale/lang/zh-CN"

import "./styles/index.scss" // global css

Vue.use(ElementUI, { size: "small", zIndex: 3000 });  // sizezIndexz-index(:2000)
Vue.use(ElementUI, { locale })
const app = new Vue({
  router
}).$mount("-sharpapp")

app/javascript/packs/admin/styles/index.scss

@import "./variables.scss";
@import "./mixin.scss";
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";

There is no problem with all five files introduced by

, where sidebar.scss refers to the variables defined in variables.scss. Compilation is an error. Try to define variables in variables.scss directly in sidebar.scss. The compilation passed, but none of these css files are reflected in the program.

what result do you expect? What is the error message actually seen?

error message: