vue.js - webpack2 下 vue2 怎么优雅调试 css

问题描述

问 题

例如如上图，无法知道这个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 又该怎么显示指定行？

解决方案

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"
},

这篇关于vue.js - webpack2 下 vue2 怎么优雅调试 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！