Как написать библиотеку компонентов React, которая позволяет перезаписывать переменные scss - PullRequest
Новая
       64

Как написать библиотеку компонентов React, которая позволяет перезаписывать переменные scss

0 голосов
/ 19 декабря 2018

У меня мало реагирующих проектов, в которых есть несколько компонентов, которыми они делятся.Поэтому я хотел создать библиотеку, содержащую компоненты, которые они используют.

Например, у меня есть компонент ActionButton, который выглядит следующим образом: 

import React from 'react';
import PropTypes from 'prop-types';
import './ActionButton.scss';

const ActionButton = ({ children }) => (
    <button className="action-button"> {children}</button>
 )

export default ActionButton;

Это файл scss: 

@import "../../styles/variables";

.action-button {
    background-color: $primary; // this is defined in the variables scss file.
}

и variable.scss

$primary: blue !default;

Теперь я хочу иметь возможность создать библиотеку с этим ActionButton с возможностью изменения значения $primary.

Я использую rollup для создания библиотеки с такой конфигурацией: 

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import sass from 'rollup-plugin-sass';
import scssVariable from 'rollup-plugin-sass-variables'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '@svgr/rollup'
import pkg from './package.json'

export default {
    input: 'src/index.js',
    treeshake: false,
    output: [
    {
       file: pkg.main,
       format: 'cjs',
       sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
  ],
   plugins: [
     external(),
     postcss({
       modules: false,
       extract: true
     }),
     url(),
     svgr(),
     babel({
        exclude: 'node_modules/**',
        plugins: [ 'external-helpers' ]
     }),
     resolve({
       extensions: ['.js', '.jsx'],
     }),
     commonjs(),
     scssVariable(),
   ]
}

Сейчас в проекте, который использует эту библиотеку, я попытался импортировать variables.scss и перезаписать переменную, но это не такне работает: 

// this is in the package that uses this library
@import '<PackageName>/src/styles/variables.scss;
$primary: red;

Затем, когда я рисую ActionButton, он все еще синий.

Что мне нужно сделать в моей библиотеке, чтобы разрешить такую ​​функциональность?

1 Ответ

0 голосов
/ 25 декабря 2018

Просто импортируйте !default переменные в ваш конкретный проект перед переменными компонента.

Это описание из документов SASS:

Переменные по умолчанию:! Default Вы можете назначить напеременные, если они еще не назначены путем добавления флага !default в конец значения.Это означает, что если переменная уже была назначена, она не будет переназначена, но если у нее еще нет значения, ей будет присвоено значение.

Преобразуется влогика, тогда, если значение переменной по умолчанию уже было определено в проекте, оно не будет переопределено следующим значением по умолчанию.Применяется только первое !default значение переменной.

Пример: 

$primary: blueviolet !default;
$primary: greenyellow !default;

.element {
  color: $primary; // will resolve to 'blueviolet'
}

Проверка стекаблиц: https://stackblitz.com/edit/react-sfbwtj?file=style.scss

ОБНОВЛЕНИЕ: Чтобы использовать его с текущей конфигурацией, пожалуйста,импортировать стили напрямую с помощью файлов scss из вашей библиотеки: 

// this is in the package that uses this library
@import './your-redefined-variables.scss';
@import '<PackageName>/src/styles/variables.scss';
@import '<PackageName>/src/styles/library-styles.scss';

.element {
  color: $primary;
}
...