之前采用 gulp 打包 vxe-table 自定义样式时，build 的时候出现这样一个问题：

Message:
    vxe-table-theme.scss
Error: File to import not found or unreadable: ~vxe-table/styles/variable.scss.
        on line 1 of vxe-table-theme.scss
>> @import '~vxe-table/styles/variable.scss';
   ^

我的 vxe-table scss 文件：

@import '~vxe-table/styles/variable.scss';

// 局部修改变量
$vxe-font-size: 14px;
$vxe-font-color: #666;
$vxe-primary-color: #409eff;
$vxe-table-font-color: $vxe-font-color;
$vxe-table-border-color: #e8eaec;
$vxe-table-border-radius: 4px;

@import '~vxe-table/styles/modules.scss';

我的 gulpfile.js：

gulp.task('build_theme_style', function () {
  return gulp.src('vxe-table-theme.scss')
    .pipe(sass())
    .pipe(prefixer({
      borwsers: ['last 1 version', '> 1%', 'not ie <= 8'],
      cascade: true,
      remove: true
    }))
    .pipe(gulp.dest('dist'))
    .pipe(cleanCSS())
    .pipe(rename({
      extname: '.min.css'
    }))
    .pipe(gulp.dest('dist'))
})

查阅了很多资料才发现 sass 编译的时候不识别 ~，我将 ~ 改为 node_modules/ 就打包成功了

@import 'node_modules/vxe-table/styles/variable.scss';

// 局部修改变量
$vxe-font-size: 14px;
$vxe-font-color: #666;
$vxe-primary-color: #409eff;
$vxe-table-font-color: $vxe-font-color;
$vxe-table-border-color: #e8eaec;
$vxe-table-border-radius: 4px;

@import 'node_modules/vxe-table/styles/modules.scss';