如何将.scss文件导出至build文件夹？Voyager组件复用样式缺失求助

我来帮你搞定这个组件导入时找不到SCSS文件的问题，下面是几种实用的解决方案：

方案1：修改Voyager的package.json，指定导出SCSS文件 #

找到Voyager项目根目录下的package.json，检查是否有files字段——这个字段定义了npm包会包含哪些文件。如果没有就新增一个，把SCSS文件的路径加进去：

{
  "files": [
    "build",
    "src/components/**/*.scss"
  ]
}

重新执行yarn build后，SCSS文件就会被包含在构建产物里了。不过要注意，你的自有项目得配置好SCSS处理的loader（比如sass-loader+css-loader），不然导入时还是会报错哦。

方案2：调整Voyager的构建配置，把SCSS编译成CSS嵌入组件 #

要是想让组件自带样式，不用依赖外部SCSS文件，可以修改Voyager的webpack配置（假设它用webpack构建）：

1. 先确保已经安装了style-loader、css-loader、sass-loader这几个依赖：

yarn add style-loader css-loader sass-loader --dev

2. 在webpack配置文件中添加SCSS的处理规则：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他loader规则
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, 'src/components')
      }
    ]
  }
};

重新执行yarn build后，构建出来的组件会把SCSS编译成CSS直接打包到JS文件里，导入时就不会再找外部的scss文件了。

方案3：在自有项目中手动导入源码里的SCSS文件 #

如果暂时不想改动Voyager的配置，也可以在你的自有项目里直接导入Voyager源码中的SCSS文件：

import { DataPane } from 'datavoyager/build/components/data-pane/index';
// 直接导入源码里的SCSS文件
import 'datavoyager/src/components/data-pane/data-pane.scss';

这种方式需要确保你的项目webpack配置里，sass-loader的include规则包含了node_modules/datavoyager目录，不然可能解析不到这个文件。

额外补充：如果Voyager用Rollup构建 #

要是Voyager用的是Rollup而不是webpack，那可以安装rollup-plugin-scss插件来处理SCSS：

1. 安装插件：

yarn add rollup-plugin-scss --dev

2. 在Rollup配置文件中添加插件：

import scss from 'rollup-plugin-scss';

export default {
  // ...其他配置
  plugins: [
    // ...其他插件
    scss({
      // 可以指定把CSS输出到build目录对应位置
      output: 'build/components/data-pane/data-pane.css',
      // 或者设置output: true，直接把样式注入到JS组件中
    })
  ]
};

内容的提问来源于stack exchange，提问作者CherryQu