[英]Autoprefixer is causing node-sass source map to point to the wrong files
I built a custom Node script that does all of my SCSS processing manually in JS rather than through the command line or with webpack. 我构建了一个自定义Node脚本,该脚本在JS中而不是通过命令行或使用webpack手动完成所有SCSS处理。
The process is as follows: 流程如下:
node-sass
and generate a source map with node-sass
at the same time. 上变化,编译SCSS到CSS与node-sass
和产生与源映射node-sass
同时。 screen.css
and screen.css.map
file using `fs.writeFile() 使用`fs.writeFile()编写screen.css
和screen.css.map
文件 screen.css
file, I then re-read it with fs.readFile
to get the buffer, and run the CSS contents through postcss
using the autoprefixer
plugin to autoprefix all of the CSS. 对于screen.css
文件,我然后使用fs.readFile
重新读取该fs.readFile
以获取缓冲区,并使用autoprefixer
插件通过postcss
运行CSS内容,以自动对所有CSS进行前缀。 I then re-write this using fs.writeFile
again and finally upload it to the server using jsftp
. 然后我重新写这个使用fs.writeFile
再次,最后用它上传到服务器jsftp
。 At the same time, the process for the screen.css.map
file is the exact same, except that I don't run it through postcss
, I just re-read it and upload it to the server after the initial writing. 同时, screen.css.map
文件的过程完全相同,只是我不通过postcss
运行它,而是重新读取它,并在初始写入后将其上传到服务器。 My problem 我的问题
If I include the autoprefixer
plugin when using postcss
, eg: 如果在使用postcss
时包括autoprefixer
插件,例如:
postcss([autoprefixer]).process(buffer, {
from: "assets/css/screen.css",
to: "assets/css/screen.css"
}).then(result => {...})
the sourcemap is completely wrong when inspecting in the browser and points to not only the wrong lines but also the wrong files. 在浏览器中进行检查时,sourcemap完全错误,不仅指向错误的行,而且指向错误的文件。
For example, the SCSS for the page banner is in _banner.scss
, but the sourcemap tells me it is all in _calendar.scss
. 例如,页面标语的SCSS在_banner.scss
,但源映射告诉我所有内容都在_calendar.scss
。
However if I keep all of the code the exact same but leave out autoprefixer
, eg: 但是,如果我保持所有代码完全相同,但忽略了autoprefixer
,例如:
postcss([]).process(buffer, {
from: "assets/css/screen.css",
to: "assets/css/screen.css"
}).then(result => {...})
The sourcemap works perfectly, pointing me correctly to _banner.scss
for all the banner styles. 源地图运行完美,可以将所有横幅样式正确地指向_banner.scss
。
Has anyone got any idea how I can fix this and get my SCSS sourcemaps working whilst still using autoprefixer? 有谁知道如何解决此问题并使我的SCSS源映射在仍然使用自动前缀的情况下工作?
Link to full sourcecode for the SCSS processing node script here, ignore the horrible nesting, this is just an early version :) https://github.com/JJGerrish/twk-boilerplate/blob/master/template/style.js 链接到SCSS处理节点脚本的完整源代码,在这里忽略可怕的嵌套,这只是一个早期版本:) https://github.com/JJGerrish/twk-boilerplate/blob/master/template/style.js
For anyone who needs it I found a fix. 对于任何需要它的人,我都找到了解决方法。
Basically, postcss
has an option to detect a previous source map and use it for it's own source map instead of generating a new one. 基本上, postcss
可以选择检测先前的源地图并将其用于自己的源地图,而不是生成新的源地图。
I found this solution on a GitHub issue that did the trick for me, basically, you have to get the node-sass
generated source map, stringify it, and then pass it to the postcss
map
option object. 我在一个GitHub问题上找到了这个解决方案,该解决方案对我来说很成功,基本上,您必须获取node-sass
生成的源映射,对其进行字符串化,然后将其传递给postcss
map
选项对象。
https://github.com/postcss/postcss/issues/222#issuecomment-318136962 https://github.com/postcss/postcss/issues/222#issuecomment-318136962
Code below incase link disappears: 以下代码,以防链接消失:
postcss([autoprefixer])
.process(result.css, {
from: "assets/css/screen.css",
to: "assets/css/screen.css",
map: {
prev: result.map.toString(),
inline: false,
},
})
.then(result => {...})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.