怎样在vue下，浏览器里定位css所在的文件、行数？

Question

在浏览器里调试样式，找不到相应的css属于哪个文件哪一行，求破、、
现在我用vue-cli创建的项目，浏览器的样式都变成了下面这个样子，都被打包到了html里面，就没法知道这些样式究竟是在哪个组件、那个文件里使用的。。

Answer 1

直接在config/index.js里设置cssSourceMap: true就好了，是我还是对vue和webpack不够熟悉

Answer 2

把 webpack.dev.conf.js 依照 webpack.prod.conf.js 进行修改：

在 webpack.dev.conf.js 文件头部添加var ExtractTextPlugin = require('extract-text-webpack-plugin')，然后在下面的配置中的 plugins 里添加new ExtractTextPlugin(utils.assetsPath('css/[name].css')),

然后 module 的 loaders 还要添加 extract: true：

module: {
  loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
},

另外，先运行 npm run build，然后进入 dist 运行 live-server 启动服务，可以利用 sourcemap 看到 css 属于哪个文件。

使用 npm i -g live-server 安装 live-server，mac 系统前面还要加 sudo。

Answer 3

浏览器指针拾取到元素以后右侧会出现对应的样式，在样式的右上角有对应的Css的行数啊