Как использовать переменные s css в приложении create response? - PullRequest
Новая
       25

Как использовать переменные s css в приложении create response?

1 голос
/ 01 февраля 2020

Я создаю свое приложение с create-react-app и пытаюсь использовать общие файлы css. У меня есть папка с ними файлы common/styles/. А также у меня есть несколько файлов s css (_reset.scss, _variables.scss).

Мои _variables.s css: 

$color-main: #1E700F;

Мой индекс.s css: 

@import "variables";

Затем я соединяю мой index.scss и мой index.js файл 

import React from 'react';
import ReactDOM from 'react-dom';
import './common/styles/index.scss';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Затем я создаю Button компонент в папке common/components/Button. И я хочу использовать в своем Button.scss следующем коде: 

.button {
  border: 1px solid $color-main;
  color: $color-main;
}

После того, как я импортирую свой Button.scss в Button.js файл, у меня появляется следующая ошибка: 

SassError: Undefined variable: "$color-main".

1 Ответ

2 голосов
/ 01 февраля 2020

Вы не должны импортировать s css в файл js. Вместо этого создайте подпапку внутри вашего s css и назовите ее компоненты. Затем создайте как css файл, специфицирующий c для такого компонента, который является «кнопкой» для вас. Затем импортируйте это так в свой индекс.s css

@import "variables";
@import "reset";
@import "components/button" <-- your button scss should be under the variables
...