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

css.sourceMap

• Type: boolean
• Default: false

用途

设置是否开启 css 的 sourse map功能。css 的 sourse map作用类似与 js 的 sourse map。

注意：开启可能会影响构建性能。

用法

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

  // css相关配置
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true // 开启 CSS source maps?
  }
}

拓展

下面是开启和关闭 css sourse map后，在Chrome DevTools 的展示效果。

• 关闭：

  下面是同时关闭css.extract和css.sourceMap的效果：

​ 下面是关闭css.sourceMap但开启css.extract的效果：

• 开启：

  下面是关闭css.extract但开启css.sourceMap的效果：

​ 下面是开启css.extract和css.sourceMap的效果：

由上面我们可以得出两个结论：

• 通过css.sourceMap，我们可以明确的指导css代码在项目文件中的位置。

• 如果开启css.extract，那么css.sourceMap效果就似乎是失效了。表面上看确实如此。但实际上css.sourceMap还是发挥了作用。

  为什么这么说呢？

  很简单，因为css.extract的作用是分离组件中css，然后生成独立的文件，而这个css 文件是被压缩过的。直接看图：

可见，打包生成的 css 文件就只用一行代码。那么控制台显示app.b1723ec1.css:1也就没错了。

继续证明：

我对app.b1723ec1.css 做了如下优化：

将#app移到了第十行

然后控制台的效果如下：

从这就可以证明css.sourceMap确实是有效的。

不过呢！虽然css.sourceMap是生效了。但是，当css.extract和css.sourceMap时等同没用开启 css.sourceMap。所以，在使用css.sourceMap时，我们最好关闭css.extract。

文章跳转

• 上一篇：Vue CLI4.0 webpack配置属性——productionSourceMap

• 下一篇：Vue CLI4.0 webpack配置属性——css.extract