要解决"Autoprefixer导致node-sass的源映射指向错误的文件"问题,可以尝试以下解决方案:
更新Autoprefixer和node-sass库到最新版本。有时旧版本的库可能存在一些已知的问题,通过更新库可以解决问题。
禁用Autoprefixer的源映射功能。在Autoprefixer配置中,设置sourceMap: false
可以禁用源映射。这样Autoprefixer将不会修改源映射文件的路径。
autoprefixer({
sourceMap: false
})
自定义Autoprefixer的源映射路径。在Autoprefixer配置中,可以设置map: { inline: false }
以及to: 'desired/file/path.css'
来指定源映射文件的路径。
autoprefixer({
map: { inline: false },
to: 'desired/file/path.css'
})
确保在使用node-sass编译样式之前先执行Autoprefixer。Autoprefixer应该在node-sass之前被调用,这样源映射文件的路径就不会被修改。
const autoprefixer = require('autoprefixer');
const sass = require('node-sass');
const result = sass.renderSync({
file: 'style.scss',
outputStyle: 'compressed',
sourceMap: true,
outFile: 'style.css',
sourceMapContents: true,
sourceMapEmbed: true,
functions: {
'autoprefixer($args...)': function() {
const prefixed = autoprefixer.process.apply(autoprefixer, arguments);
return sass.types.String(prefixed.css);
}
}
});
fs.writeFileSync('style.css', result.css);
fs.writeFileSync('style.css.map', result.map);
这些解决方案可以根据具体情况进行调整和组合使用,以解决Autoprefixer导致node-sass源映射指向错误文件的问题。
上一篇:Autoprefixer不支持Nodev8.17.0。请更新它。
下一篇:Autoprefixer生成相同的CSS代码,只是添加了注释的sourceMappingURL。这有什么用处?我该如何使用它?