webpack2 下 vue2 怎么优雅调试 css

Question

例如如上图，无法知道这个css类是在哪个文件的哪一行，

在js 里面 import 代码

import 'material-design-icons/iconfont/material-icons.css'

webpack

    {
        test: /\.(css|scss|sass)$/,
        loader: "vue-style-loader!css-loader!sass-loader"
    },

    devtool: '#cheap-module-eval-source-map'

vue-loader 选项

    loaders: {
        css: 'vue-style-loader!css-loader',
        scss: 'vue-style-loader!css-loader!sass-loader',
    },

还有写在 .vue 里面的 style 又该怎么显示指定行？

Answer 1

vue-loader 选项 加上 ?sourceMap

loaders: {
        css: 'vue-style-loader?sourceMap!css-loader?sourceMap',
        scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
    },

webpack

{
    test: /\.(css|scss|sass)$/,
    loader: "vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap"
},

Answer 2

在vue文件的style区域导入css文件，@import 文件路径

Answer 3

用这货extract-text-webpack-plugin把所有样式都合并成一个文件夹。
然后devtool: 'source-map' 给样式文件加上源码

https://github.com/webpack/ex...
http://webpack.github.io/docs...

Answer 4

构建后的代码和源码不一样后，一般都是通过sourcemap解决的。无论JS，还是CSS。
具体配置我就不扔了，网上一堆。