webpack4，webpack5-css，less样式文件的兼容

最新推荐文章于 2023-02-07 15:09:56 发布

原创

最新推荐文章于 2023-02-07 15:09:56 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #postcss #前端 #webpack

本文介绍了如何在webpack4和webpack5中处理CSS和Less文件的兼容性，通过安装postcss-loader和postcss-preset-env库进行CSS兼容配置。在webpack4中详细说明了配置步骤，而在webpack5下，大部分配置相同。对于Less文件，由于其自身不支持兼容性处理，所以需要在转换为CSS后处理。最后，文章提出了优化方案，针对重复代码进行提取。

安装postcss-loader和postcss-preset-env两个库

css文件的兼容性处理

webpack4的样式兼容配置

webpack.config.js中的配置

            // 打包css资源
            {
                // 正则表达式,匹配那些文件，匹配以.css结尾的文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // 创建style标签，将js的样式资源插入进去，添加到head中生效
                    // 'style-loader',
                    // 将css文件提出来不能使用style-loader，需要使用mini-css-extract-plugin自己的loader
                    // 作用将js中的css提取成单独文件
                    MiniCssExtractPlugin.loader,
                    // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串。
                    'css-loader',
                    // css兼容性处理
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () =>

最低0.47元/天解锁文章