Nuxtjs - относительные модули не найдены, хотя введены правильные пути
Я добавил все файлы шаблона, которые я должен использовать в своем приложении Nuxt (css, js, images etc.), в папку 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';Кто-нибудь знает, в чем проблема?
🤔 А знаете ли вы, что...
CSS Transition позволяет создавать плавные переходы между стилями при изменении свойств элементов.
Ответы:
ты решил это?
это работает для меня:
1. Я добавил @nuxtjs/style-resources зависимость к проекту
2. Это часть моего nuxt.config.js:
css: ['~assets/css/styles.less'],
modules: [
['@nuxtjs/style-resources'],
],
styleResources: {
less: './assets/css/modules/*.less'
},
Согласно официальной документации:
Inside your css files, if you need to reference your assets directory, 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