Задать вопрос
Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (3)

Лучшие ответы пользователя

Все ответы (2)
  • Как заставить React видеть глобальные scss переменные?

    @EGO7000
    Если вдруг кто будет искать ответ спустя столько лет (и для одного подписавшегося) - есть такая штука как CRACO. Сделана для тех, кто хочет править конфиги create-react-app без eject'a. Вот ссылка на статью с ответом на ваш вопрос.

    Если коротко, то:

    1. Ставим пакет CRACO
    npm i -D @craco/craco
    Если используем typescript, то ещё
    npm i -D @craco/types

    2. В package.json меняем react-scripts на craco
    "scripts": {
    -  "start": "react-scripts start"
    +  "start": "craco start"
    -  "build": "react-scripts build"
    +  "build": "craco build"
    -  "test": "react-scripts test"
    +  "test": "craco test"
    }


    3. Создаём в корне проекта файл конфигурации craco.config.js со следующим содержимым
    module.exports = {
      style: {
        sass: {
          loaderOptions: {
            additionalData: `
              @import "src/assets/scss/_variables.scss";
              @import "src/assets/scss/_mixins.scss";
            `,
          },
        },
      },
    };

    3.1. Для адептов TS и ньюскул можно вместо craco.config.js создать .cracorc.ts с таким содержимым
    export const style = {
      sass: {
        loaderOptions: {
          additionalData: `
    			@import "src/assets/scss/_variables.scss";
    			@import "src/assets/scss/_mixins.scss";
    		  `,
        },
      },
    };


    * Пути и файлы естественно заменяете на свои.

    На выходе получите глобальные переменные и миксины в компонентах без дополнительно импорта, но вероятно не сможете использовать новомодные @use в глобальном файле подключения стилей. Тут надо раскуривать что и в какой последовательности подключается.
    Ответ написан
    Комментировать
  • Какой смысл в CSS фреймворках, если есть чистый CSS?

    @EGO7000
    Представьте, что вы решили собрать машину!
    Да, можно сделать самоделку из деталей, каждую из которых вы выточите сами. Это писать на чистом CSS.
    Препроцессоры это станки, на которых можно сделать детали. Они это делают удобнее и точнее.
    Фреймворк же это как автомобильная платформа, на которой выпускают машины: сочетание инженерных решений и набора компонентов, что уже использовалось для выпуска других моделей.
    Сборщик это конвеер, который помогает вам избавиться от рутины.

    Тот же бутстрап довольно хорошо кастомизируется и расширяется уже вашими стилями, если внимательно почитать документацию и собрать его самому из исходников. Собственно, фреймворки нужны, чтобы не наступать на те грабли, на которые наступило множество людей до вас.
    Но опять же - все зависит от задачи! Собираете болид - нужен один фреймворк, а если грузовик - то другой)))
    Ответ написан
    Комментировать