css - Nuxtjs - 尽管输入了正确的路径但未找到相关模块

Question

我将我应该在我的 Nuxt 应用程序中使用的模板的所有文件(css、js、图像等。)添加到 assets/theme 文件夹中。有 assets 文件夹结构:

在 assets/theme/sass/layout/_menu.scss 里面我有这一行:

            background-image: url('../../css/images/close.svg');

在 assets/theme/sass/layout/_main.scss 里面我有这一行:

	@include vendor('background-image', (
				'linear-gradient(to top, #{$overlay}, #{$overlay})',
				'url("../../images/banner.jpg")',

这是 svg 文件的正确路径(自动完成也可以正常工作)但是当我运行应用程序时，出现错误:

These relative modules were not found:     

* ../../css/images/close.svg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss

* ../../images/banner.jpg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./assets/scss/main.scss

在 assets/scss/ 中，我有 main.scss 文件，这是我导入所有其他 css、scss 等的全局文件:

@import '../theme/css/main.css';
@import '../theme/sass/main';

有谁知道是什么问题吗？

Answer 1

根据官方文档:

Inside your css files, if you need to reference your assetsdirectory, use ~assets/your_image.png(without a slash)

在您的情况下，我认为这会起作用:

background-image: url(~assets/theme/css/images/close.svg);

https://nuxtjs.org/docs/2.x/directory-structure/assets#images