Problems while trying to import css file to vue.js

Question

So I'm building my first vue app but I cant manage to find a way to import external CSS files under /assets/css. Is there a way to import external css files with vue? Do I need an extra package for this?

What I tried:

In main.js I tried adding import '@/assets/css/menu.css'; but it returns the following error when building the app:

 error  in ./src/assets/css/menu.css

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../images/menu-back.svg' in 'C:\Users\amng8\Desktop\Ruby\app\client\src\assets\css'
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\webpack\lib\Compilation.js:925:10
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\webpack\lib\NormalModuleFactory.js:401:22
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\webpack\lib\NormalModuleFactory.js:130:21
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\webpack\lib\NormalModuleFactory.js:224:22
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\neo-async\async.js:2830:7
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\neo-async\async.js:6877:13
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\webpack\lib\NormalModuleFactory.js:214:25
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\enhanced-resolve\lib\Resolver.js:213:14
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\amng8\Desktop\Ruby\app\client\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\amng8\Desktop\Ruby\app\client\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\amng8\Desktop\Ruby\app\client\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at C:\Users\amng8\Desktop\Ruby\app\client\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43

 @ ./src/pages/index/main.js 7:0-31
 @ multi ./src/pages/index/main.js

Also tried to include

<link href="assets/css/common.css" rel="stylesheet" />
<link href="assets/css/menu.css" rel="stylesheet" />
<link href="assets/css/baseunit.css" rel="stylesheet" />

in the index.html under /public but apparently it can only get files from /public and I don't know if I should leave the files in the /public directory.

File directory print:

PS: I'm using a multi-page setup in this vue app.

I think that's all I tested. I'm new to vue.js so if you need any extra info let me know.

where is the menu-back.svg?

user13808619
– user13808619

2020-07-04 22:32:36 +00:00
Commented Jul 4, 2020 at 22:32 — user13808619
– user13808619, Commented Jul 4, 2020 at 22:32
Didnt add it yet. Is that the problem?

DeadSec
– DeadSec

2020-07-04 22:52:05 +00:00
Commented Jul 4, 2020 at 22:52 — DeadSec
– DeadSec, Commented Jul 4, 2020 at 22:52

Cristian Incarnato · Accepted Answer · 2020-07-05 00:47:26Z

1

Try in this way:

import './assets/css/menu.css'

Oh! I see you have your main.js in src/pages/index/main.js For this reason is not working.. Your main.js must be in src/main.js

If you want to keep your main.js in that path (src/pages/index/main.js), you need to change to

import '../../assets/css/menu.css'

edited Jul 5, 2020 at 0:47

answered Jul 4, 2020 at 23:05

Cristian Incarnato

2951 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DeadSec Over a year ago

I suppose I should add that in the script tag but gives me this error:

This relative module was not found:  * ./assets/css/menu.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/navbar.vue?vue&type=script&lang=js&

Cristian Incarnato Over a year ago

I tested in my vue app before answer and is working. I add in main.js

Cristian Incarnato Over a year ago

Oh! I see you have your main.js in src/pages/index/main.js For this reason is not working.. Your main.js must be in src/main.js I have edited the answer

DeadSec Over a year ago

Worked! How about js I tried doing the same thing but it gives a lot of errors. Do you know a way to import js files too?

Collectives™ on Stack Overflow

Problems while trying to import css file to vue.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related