Относительная проблема с URL-адресом в файле Sass приложения, созданного с помощью приложения Create React - PullRequest
Новая
       41

Относительная проблема с URL-адресом в файле Sass приложения, созданного с помощью приложения Create React

0 голосов
/ 01 февраля 2019

Вот моя структура папок: 

-- src
---- components
------ App.js
------ App.scss
---- img
------ icon-gear.png
---- styles
------ base.scss

Вот соответствующие части моего компонента (App.js): 

import './App.scss';

class App extends Component {

Вот соответствующие части моего файла Sass (App.scss): 

@import '../styles/base.scss';

.App {
  .App-btnSettings {
    background-image: url('../img/icon-gear.png');
  }
}

Я не могу на всю жизнь получить правильный путь изображения иконки-шестеренки.

Когда я использую ../img/icon-gear.png, он бомбардирует:

Модуль не найден: не удается разрешить '../img/icon-gear.png' в '/ Users / rob / development / openbazaar / openbazaar-web / src / styles / components'

Когда я использую ../../img/icon-gear.png, он бомбит:

. / Src / components / App.scss ... Вы попытались импортировать ../../img/icon-gear.png который находится вне каталога проекта src /.Относительный импорт за пределами src / не поддерживается.

К какому корневому пути должен быть относительный путь изображения?Я бы подумал, что это src/components, потому что там находится этот файл sass, а также там, где я делаю импорт (@import '../styles/base.scss') в верхней части файла.Но ... это не работает (первая ошибка выше).

Также кажется, что между двумя разными сообщениями об ошибках существует разный базовый путь.

1 Ответ

0 голосов
/ 01 февраля 2019

Похоже, структура вашей папки неверна.

-- src
---- components
------ App.js
------ App.scss
-- img
---- icon-gear.png
-- styles
---- base.scss

Должно быть 

-- src
---- components
------ App.js
------ App.scss
---- img
------ icon-gear.png
---- styles
------ base.scss

Webpack должен правильно распознавать относительные пути после того, как вы измените это.

Также убедитесь, что у вас установлен sass на верхнем уровне

npm install --save-dev node-sass
...