将css文件导入vue.js时遇到的问题

Question

因此，我正在构建我的第一个vue应用程序，但我无法设法找到一种方法来导入/assets/css下的外部CSS文件。有办法用vue导入外部css文件吗？我需要额外的包裹吗？

我尝试了什么：

在main.js中，我尝试添加import '@/assets/css/menu.css';，但它在构建应用程序时返回以下错误：

 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

还试图包括

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

在index.html中，/public下，但是很明显，它只能从/public获得文件，我不知道是否应该将这些文件留在/public目录中。

文件目录打印：

​

​

PS:我在这个vue应用程序中使用了一个多页面设置。

我想这就是我测试的全部。我是vue.js的新手，所以如果你需要任何额外的信息，请告诉我。

Answer 1

试着这样做：

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

噢!我看到您的main.js在src/page/index/main.js中，因为这个原因无法工作。您的main.js必须位于src/main.js中。

如果希望将main.js保持在该路径(src/page/index/main.js)，则需要更改为

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