如何在 Vue CLI 5 中将样式提取到独立的文件中

在 Webpack 4 之前提取内容到文件中用的是 extract-text-webpack-plugin 插件,但在 Webpack 4 以及现在最新的 Webpack 5 下面,已经换成了 mini-css-extract-plugin 插件来完成相关任务。

Vue CLI 的配置文件默认是 vue.config.js,在 chainWebpack 下加入如下配置来完成样式抽取

config.when(process.env.NODE_ENV !== 'development', config => {
  config.plugin('extract-css').tap(options => {
    // 文件位置是相对于 output 的
    options[0].filename = 'css/[name].[hash:8].css'
    return options
  })
})
posted @ 2022-04-27 11:34  尹宇星_Kim  阅读(463)  评论(0编辑  收藏  举报