Vue CLI 3中使用Extract-Text-Webpack-Plugin提取CSS至指定文件的问题

嘿，我明白你遇到的问题了——想用Vue CLI把CSS提取成固定的styles.css，结果现在输出的是带哈希值的文件名，而且自己配置css.extract后还构建失败了。我来一步步帮你搞定：

为什么你的配置会失败？ #

你之前写的{ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }有个核心问题：生产环境下Vue CLI默认用MiniCssExtractPlugin提取CSS，而style-loader是用来把CSS注入到DOM中的，两者功能冲突，所以构建直接报错了。而且Vue CLI已经帮你预设好了css-loader、sass-loader这些基础loader，根本不需要你手动在extract里指定。

正确的配置方式 #

要得到固定文件名的CSS，只需要在vue.config.js里调整css.extract的输出文件名配置就行，不需要动loader部分：

module.exports = {
  css: {
    extract: {
      // 主CSS文件的输出路径和固定文件名
      filename: 'css/styles.css',
      // 如果你的项目有代码分割（比如异步组件），对应的CSS块也可以指定固定名
      // 要是不想改块文件名，也可以保留哈希，比如'css/[name].[hash:8].css'
      chunkFilename: 'css/[name].css'
    }
  }
}

进阶：区分开发/生产环境 #

开发环境下提取CSS会减慢热更新速度，所以建议只在生产环境启用固定文件名的提取：

// 判断当前是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  css: {
    extract: isProduction ? {
      filename: 'css/styles.css',
      chunkFilename: 'css/[name].css'
    } : false // 开发环境禁用提取，用内联CSS保证热更新
  }
}

自定义loader配置（如果需要） #

要是你需要给css-loader或sass-loader加额外配置（比如全局Sass变量），别在extract里写，要放在css.loaderOptions里：

module.exports = {
  css: {
    extract: {
      filename: 'css/styles.css',
      chunkFilename: 'css/[name].css'
    },
    loaderOptions: {
      sass: {
        // 示例：注入全局Sass变量
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

配置完之后运行npm run build，你就能在dist/css下看到固定命名的styles.css啦！

内容的提问来源于stack exchange，提问作者Boris K