之前采用 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';
