【问题标题】：Export .scss to build folder?导出 .scss 到构建文件夹？
【发布时间】：2018-04-20 03:09:52
【问题描述】：

问题

我正在重复使用 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 文件在yarn build 期间并未导出到/build 文件夹。

我知道data-pane.scss 在/src/components/data-pane/ 中。 但是如何将每个组件的.scss文件从/src/components/复制到/build/components呢？

我的尝试

我一直在查看他们的build script。我应该使用fs.copySync() 复制每个.scss 吗？
我还查看了webpack.config.prod.js。 scss 相关的配置如下所示：

我在 SO 上看到了很多关于如何在构建过程中将 .scss 导出为 .css 的问题。我只是想将原始的.scss 复制并粘贴到构建文件夹中。

【问题讨论】：

标签： reactjs webpack build sass

【解决方案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');
      }
    }
  });
}

【讨论】：