Question

我有一个在index.html中使用app.css的应用程序。此app.css是来自多个SCSS文件的输出css文件。在检查元素以查找该元素的css时，如何知道该样式来自哪个SCSS文件？

Answer 1

您可以使用 SASS Source Mapping 。这样，您就可以在浏览器检查器中显示确切的/*# sourceMappingURL=screen.css.map */文件。

向Sass的命令行工具添加标志：

$ sass sass / screen.scss：stylesheets / screen.css --sourcemap

如果在运行该命令后查看输出文件夹，您会注意到已生成的CSS文件末尾添加了注释：

import  React from "react";

export class Panel extends  React.Component{
render() {
    return (
    <div>
        <div className="row panel">
            <div  className="col-sm-12 header">{this.props.children}-------Hi {this.props.uName}</div>
            <div className="col-sm-12 body"><img className="img-responsive" src={this.props.imgUrl} alt = "" /></div>
            <div id="enzymeTest" className="col-sm-12 footer">{this.props.children}</div>
        </div>
    </div>
    );
}
}

希望这有帮助！

Answer 2

由于您没有显示代码，我会假设......您正在使用指南针进行编译？在这种情况下，您可以使用ruby为您的源文件进行源映射。

这可以这样做：

Array
(
  [0] => Array
  (
    [App] => APP1
    [Type] => Array
    (
      [0] => DB
      [1] => WEBSITE
    )
  )
  [1] => Array
  (
    [App] => APP2
    [Type] => IOS
  )
)

这可以添加到您的ruby文件中。

如果你正在使用gulp或grunt，你可以使用：

https://www.npmjs.com/package/grunt-concat-sourcemap 要么 https://www.npmjs.com/package/gulp-concat-sourcemap

或者如果你正在使用sass：

http://thesassway.com/intermediate/using-source-maps-with-sass

在源SCSS文件中查找类名，该文件在浏览器中编译为单个CSS文件

2 个答案: