Экспортировать .scss для создания папки?

Проблема

Я повторно использую Компоненты React из Проект "Вояджер". После сборки Voyager (yarn build) я могу импортировать компоненты в свой собственный проект следующим образом:

import { DataPane } from 'datavoyager/build/components/data-pane/index';

Но у меня одна проблема: файл index.js будет содержать такие строки:

var styles = require("./data-pane.scss");

Однако этот файл data-pane.scss не был экспортирован в папку /build во время yarn build.

Я знаю, что data-pane.scss находится в /src/components/data-pane/. Но как мне скопировать файлы .scss каждого компонента с /src/components/ на /build/components?

Мои попытки

Смотрел их сценарий сборки. Следует ли мне использовать fs.copySync() для копирования каждого .scss?
Еще посмотрел webpack.config.prod.js. Конфигурация, связанная с scss, выглядит так:

Экспортировать .scss для создания папки?

Я видел много вопросов по SO о том, как экспортировать .scss как .css во время сборки. Я просто хочу скопировать и вставить исходный .scss в папку сборки.

reactjs webpack build sass

20.04.2018 05:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

140

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решаю проблему добавлением функции в Voyager scripts/build.js

// Copy scss files from /src/components/ to /build/components/ for external app to use Voyager components
function copyScss() {
  fs.copySync(path.resolve(__dirname, '../src/components'), path.resolve(__dirname, '../build/components'), {
    dereference: true,
    filter: (path) => {
      if (fs.lstatSync(path).isDirectory()) {
        return true;
      } else {
        return path.endsWith('.scss');
      }
    }
  });
}

20.04.2018 06:35