Home

Hey guys, I found a bug and I don’t know if it is related with Nuxt and/or Vue-loader.

Since Nuxt uses Single File Components I usually create a global css with all my variables and import inside the <style></style> tag but seems the ~/assets or ~assets isn’t working properly.

I got a error when I try to use it:

BUT when I used relative path works fine

<style>
  /* works! */
  @import "../../assets/styles/element/theme-variables.css";
  /* fails  */
  @import "~assets/styles/element/theme-variables.css";

   :root {
    --sidebar-padding: var(--notification-padding);
  }

  .login {
    background-image: url(~assets/images/waves.png);
    background-position: 0% 110%;
    background-repeat: no-repeat;
  }

  .login-sidebar {
    background: var(--dark-menu-item-fill);
    padding: var(--sidebar-padding);
    height: 100%;
    width: 400px;
    color: var(--color-white);

    & .el-form-item__label {
      color: var(--color-white);
    }
  }
</style>

I’m following this thread #1241 and looks like with the next release (RC5) the ~/assets (eg: used for background-images) will fixed too.

Workaround or the right way?

On my previous projects using Vue-loader, I was using the sass resources loader to accomplish something similar, serving bootstrap variables file across all *.scss and inside *.vue templates, that way, sass-loader have all variables available before generate the compiled file.

Now, I’m using a different set up (postCSS + CSSnext) and after some time struggling to configure, I archived what I need it with few pitfalls.

I used this thread #1100 as base to set up.

---

The question is: the only way to serve global files is using this workaround OR relatives paths?