Vue CLI4.0 webpack配置属性——css.sourceMap

Posted 2023-03-03 胖鹅68

文章目录

• 一、问题说明
• 二、解决办法：vue.config.js 配置
• 三、个人理解说明
• • css.extract 配置
  • css.sourceMap 配置

文章参考 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?
  

三、个人理解说明

css.extract 配置

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

css.sourceMap 配置

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