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

css.extract

• Type: boolean | Object
• Default: 生产环境下是 true，开发环境下是 false

官方文档说明

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

用途

官方文档说了这么多。总之一句话，css.extract用于控制是否强制分离vue 组件内的css。

用法

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

  // css相关配置
  css: {
    extract: false  // 是否使用css分离插件 ExtractTextPlugin
  }
}

例子

以下对同一个项目开启和关闭css.extract的结果：

关闭：

开启：

可以看到，开启css.extract后，打包的结果会多出一个 css 文件夹以及css 文件。

再来看看浏览器控制台的效果：

关闭：

开启：

可以看到如果没有开启css.extract，组件样式以内部样式表的形式加载的。

文章跳转

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

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