简体繁体 English

在开发中创建反应应用程序css源映射

[英]Create-react-app css source-maps in development

原文 2017-04-05 05:45:33 4 1 css/ webpack/ source-maps/ create-react-app

How can I make visible css filenames in chrome dev tools instead of <style></style> ? 如何在chrome dev工具中创建可见的css文件名而不是<style></style> ？

Is it possible to save the changes made in dev tools into actual css/sass files? 是否可以将开发工具中所做的更改保存到实际的css / sass文件中？

1 个解决方案

First, your question title/body is a little confusing, but I'll give it a go. 首先，你的问题标题/正文有点令人困惑，但我会试一试。

How can I make visible css filenames in chrome dev tools instead of ? 如何在chrome dev工具中创建可见的css文件名而不是？

Assuming that you're wanting to see the source files versus the compiled output, this is a Chrome Dev Tools Setting. 假设您想要查看源文件与编译输出，这是Chrome Dev Tools设置。 You can access that setting most easily from the Dev Tools. 您可以从Dev Tools中轻松访问该设置。 With Dev Tools open, you can access Settings either via F1 or by selecting the 3-dot-stack button in the upper-right. 打开开发工具后，您可以通过F1或右上角的3点堆栈按钮访问设置。 Under Sources , you can turn on "Enable CSS Source Maps". 在“ Sources ”下，您可以启用“启用CSS源地图”。 DevTool Source Map Documentation DevTool源地图文档

Is it possible to save the changes made in dev tools into actual css/sass files? 是否可以将开发工具中所做的更改保存到实际的css / sass文件中？

Yep. 是的。 You can use DevTool Workspaces to do this. 您可以使用DevTool工作区来执行此操作。 You can read the full Workspace recommendations here . 您可以在此处阅读完整的Workspace建议。