Vue CLI4.0 webpack配置属性——css.sourceMap_vue csssourcemap

文章参考 Vue CLI4.0 webpack配置属性——css.sourceMap

一、问题说明

在工作中使用Vue-cli脚手架开发的项目中，有时候为了调试CSS样式，每次都只能看到编译之后的CSS 样式，无法定位到具体是哪个 vue 文件产生的，影响了开发效率，因此想着能够通过开发控制台能直接帮忙定位到具体vue文件中。

二、解决办法：vue.config.js 配置

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist' // 输出文件目录

  // css相关配置
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true // 开启 CSS source maps?
  }
}
1
2
3
4
5
6
7
8
9
10

三、个人理解说明

css.extract 配置

vue文件编译之后的 css 会生成一个单独的 css 文件

css.sourceMap 配置

通过控制台查看CSS文件，能帮忙定位到 具体的 vue 文件中去