Как создать использование абсолютного пути в файлах sass/scss?

Question

Я использую Creacte-реагировать-приложение 2.0.0-next.66cc7a90, которое уже имеет поддержку файлов Sass/Scss

однако с относительным импортом по умолчанию в файлах Sass/Scss, я должен использовать такой код @import "../../../../../styles/variables/_variables.scss";

вместо этого я хочу использовать абсолютный импорт, чтобы я мог импортировать с кодом @import "styles/variables/_variables.scss";

Я знаю один из способов добиться этого, чтобы обновить параметры

{
   loader: "sass-loader",
   options: {
        includePaths: ["absolute/path/a", "absolute/path/b"]
 }

но я хочу сделать это без извлечения, как я могу это сделать? с помощью response-app-rewired?

Answer 1

Добавьте необходимые корневые пути включения в SASS_PATH переменная окружения.

Его можно установить либо при запуске yarn или npm команд или в .env файл.

пример

// my-component.jsx
import React from 'react';
import './my-component.scss';

class MyComponent extends React.Component {
  render() {
    return (<div className="container">Hello</div>);
  }
}

// my-component.scss
@import 'styles/abstracts/variables';

.container {}

Предполагая styles/abstracts/_variables.scss существует под src, вы можете сделать следующее:

SASS_PATH=src yarn start

ИЛИ

echo SASS_PATH=src > .env
yarn start