解决PostCSS配置

小灰灰 2023-06-30 10:45 3阅读 0赞

webpack.config.js：

const path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
        entry: { index: './src/index.js' },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        devServer: {
            contentBase: './dist',
            port: '1217',
            open: true,//自动拉起浏览器
            hot: true,//热加载
            host: '127.0.0.1',
        },
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: 'index.html',
                filename: 'index.html'
            })
        ],
        module: {
            rules: [
                {
                    test: /\.(scss|css)$/,    //打包css、sass文件
                    use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'sass-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        }
                    ]
                },
            ],
        },
    };

因为postCss版本更新，之前版本的配置已无效**postcss.config.js**：

module.exports = {
      plugins: [
        require('autoprefixer')({
          browsers: ['last 100 versions']
        })// 自动添加css前缀
      ]
    }

更换为：

module.exports = {
      plugins: [
        require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})// 自动添加css前缀
      ]
    }

即可解决

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 nuxt3：postcss-pxtorem

一、理解postcss [https://www.postcss.com.cn/][https_www.postcss.com.cn] 1.1、PostCSS是一个用 Ja

╰半夏微凉°/ 2024年03月27日 11:15/ 0 赞/ 143 阅读

相关解决PostCSS配置

webpack.config.js： const path = require('path'); var HtmlWebpackPlugin = requir

小灰灰/ 2023年06月30日 10:45/ 0 赞/ 4 阅读

相关 webpack配置postcss-loader无效

webpack配置postcss-loader无效文档配置如下: postcss.config.js module.exports = {

拼搏现实的明天。/ 2023年02月14日 03:20/ 0 赞/ 62 阅读

相关 18.配置postCSS自动添加css的兼容前缀_

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2023年01月22日 04:54/ 0 赞/ 138 阅读

相关神奇的 postcss

> postcss 是什么 > 按官网 https://postcss.org/ 上的介绍，它是一个用 JavaScript 转换 CSS 的工具（A tool f

深碍√TFBOYSˉ_/ 2023年01月17日 10:46/ 0 赞/ 123 阅读

相关解决：Error: PostCSS received undefined instead of CSS string

前言 vue项目运行报错： -------------------- 错误如下 ERROR Failed to compile with 2 erro

深碍√TFBOYSˉ_/ 2022年12月28日 01:39/ 0 赞/ 192 阅读

相关 PostCss使用

PostCSS 插件使用 [PostCSS CLI][] `2_postcss.css` 是源文件， `3_post.css` 是生成的文件全局安装 post

╰半夏微凉°/ 2022年11月29日 03:09/ 0 赞/ 116 阅读

相关手把手教你webpack3（11）PostCSS-Loader配置简述

POSTCSS-LOADER配置简述前注：文档全文请查看 [根目录的文档说明][Link 1]。如果可以，请给本项目加【Star】和【Fork】持续关注。

怼烎@/ 2022年06月03日 00:14/ 0 赞/ 596 阅读

相关 webpack 配置postcss

1、安装postcss-loader npm install --save-dev postcss-loader 2、然后配置webpack.config

我就是我/ 2022年05月29日 06:41/ 0 赞/ 248 阅读

相关 PostCSS 入门

PostCSS 入门 PostCSS是什么常用插件autoprefixer配置 webpack配置postcss

以你之姓@/ 2022年04月24日 01:04/ 0 赞/ 201 阅读