在 Webpack 中使用 postcss-preset-env，你需要配置 PostCSS 和相关的加载器

小硕ikeu

已于 2024-08-02 16:13:41 修改

阅读量260

点赞数 1

文章标签： webpack postcss 前端

于 2024-08-02 16:10:05 首次发布

本文链接：https://blog.csdn.net/flikeu/article/details/140872066

版权

环境：node 18.19.0 、webpack：5.93.0

1. 首先，你需要安装 PostCSS、postcss-loader 和 postcss-preset-env。可以通过 npm 或 yarn 来安装

npm install postcss postcss-loader postcss-preset-env --save-dev

2. 在你的 Webpack 配置文件中（通常是 webpack.config.js），配置 postcss-loader 以使用 postcss-preset-env

①写在一起

{
    test: /\.css/i,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        require('postcss-preset-env')({
                            // 你的 PostCSS 配置
                            // 选择特性的提案阶段，这里我们使用阶段2的特性
                            stage: 2,
                            // 启用或禁用特定的CSS特性
                            features: {
                                'custom-properties': true, // 启用CSS变量
                                'color-functional-notation': true, // 启用颜色修改函数
                                'custom-media-queries': true, // 启用自定义媒体查询
                                // 可以添加更多特性...
                            },
                            // 定义目标浏览器，这里我们选择支持最新两个版本的所有主流浏览器
                            browsers: ['last 2 versions', '> 1%', 'not dead'],
                            // 是否保留原始的CSS代码，这里我们选择保留
                            preserve: true,
                            // 传递给Autoprefixer的额外选项
                            autoprefixer: {
                                cascade: true, // 是否美化输出的前缀
                            }
                        }),
                    ],
                }
            }
        }
    ]
}

②虽然在 Webpack 配置文件中可以直接配置 postcss-loader，但也可以创建一个单独的 PostCSS 配置文件（如 postcss.config.js）：

//postcss.config.js

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      // 选择特性的提案阶段，这里我们使用阶段2的特性
      stage: 2,
      // 启用或禁用特定的CSS特性
      features: {
         'custom-properties': true, // 启用CSS变量
         'color-functional-notation': true, // 启用颜色修改函数
         'custom-media-queries': true, // 启用自定义媒体查询
          // 可以添加更多特性...
       },
       // 定义目标浏览器，这里我们选择支持最新两个版本的所有主流浏览器
       browsers: ['last 2 versions', '> 1%', 'not dead'],
       // 是否保留原始的CSS代码，这里我们选择保留
       preserve: true,
       // 传递给Autoprefixer的额外选项
       autoprefixer: {
           cascade: true, // 是否美化输出的前缀
        }
    })
  ]
};

//webpack.config.js

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};