生产环境下合并并压缩项目CSS文件为单个CSS文件的方法

当然可以，以下是几种适合不同场景的实用方案：

一、轻量命令行方案（适合小项目快速落地） #

1. 先初始化npm项目（未初始化的话）：

   npm init -y
   

2. 安装合并与压缩工具：

   npm install concat-cli cssnano --save-dev
   

3. 在package.json的scripts字段中添加构建命令：

   "scripts": {
     "build:css": "concat-cli -o dist/styles.css ./variables.css ./bootstrap-overrides.css ./utils/utils.css ./elements/*.css ./modules/*.css && npx cssnano dist/styles.css dist/styles.min.css"
   }
   

4. 执行命令生成压缩文件：

   npm run build:css
   

该命令会先按指定顺序合并所有CSS文件到dist/styles.css，再通过cssnano压缩生成dist/styles.min.css。注意必须保持variables.css在最前面，避免变量引用报错。

二、现代构建工具方案（适合需集成JS打包的项目） #

Vite（推荐，配置极简） #

1. 初始化Vite项目：

   npm create vite@latest
   

   选择vanilla模板，跟着向导完成初始化即可。
2. 新建main.css文件，将你的所有@import语句移入：

   @import './variables.css';
   @import "./bootstrap-overrides.css";
   @import "./utils/utils.css";
   @import './elements/elements.css';
   @import './elements/title.css';
   @import './elements/button.css';
   @import './elements/input.css';
   @import './modules/nav.css';
   @import './modules/toggle-theme.css';
   @import './modules/theme-search.css';
   @import './modules/toggle-fullscreen.css';
   

3. 在项目入口main.js中导入这个main.css：

   import './main.css'
   

4. 执行生产构建：

   npm run build
   

Vite会自动完成CSS的合并、压缩，最终在dist/assets目录下生成带哈希的压缩CSS文件，直接用于生产环境即可。

Webpack（适合复杂项目） #

1. 安装依赖：

   npm install webpack webpack-cli css-loader mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev
   

2. 新建webpack.config.js配置文件：

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
   
   module.exports = {
     mode: 'production',
     entry: './main.css',
     module: {
       rules: [
         {
           test: /\.css$/i,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
       ],
     },
     plugins: [new MiniCssExtractPlugin({ filename: 'styles.min.css' })],
     optimization: {
       minimizer: [new CssMinimizerPlugin()],
     },
   };
   

3. 执行构建：

   npx webpack
   

最终会在dist目录生成压缩好的styles.min.css。

三、手动处理（应急场景） #

把所有CSS文件的内容按顺序复制到一个新文件中（务必保证variables.css在最开头），再用CSS压缩工具（本地或在线）处理该文件，得到压缩后的版本。不过这种方法仅适合临时应急，频繁更新的项目不建议使用，容易出现顺序错误。

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