CODEWITHSUNDEEP
reactjswebpackbuildsass
CherryQu
CherryQu

Reputation: 3383

Export .scss to build folder?

Problem

I'm re-using React components of the Voyager project. After building Voyager (yarn build), I can import components to my own project like this:

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

But I have one problem: the index.js file will contain lines like this:

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

Yet that data-pane.scss file was not exported to the /build folder during yarn build.

I know that data-pane.scss is in /src/components/data-pane/. But how do I copy the .scss files of each component from /src/components/ to /build/components?

My Attempts

enter image description here

Upvotes: 0

Views: 255

Answers (1)

CherryQu
CherryQu

Reputation: 3383

I solve the problem by adding a function to 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');
      }
    }
  });
}

Upvotes: 1

Related Questions