导出.scss来构建文件夹？

Question

问题

我正在重复使用React components的Voyager project。在构建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？

我的尝试

• 我一直在看他们的build script。我应该使用fs.copySync()复制每个.scss吗？

• 我也看了webpack.config.prod.js。与scss相关的配置如下所示：

• 我看到很多关于如何在构建期间将.scss导出为.css的问题。我只想复制＆amp;将原始.scss粘贴到构建文件夹。

Answer 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');
      }
    }
  });
}