使用postcss-loader cssnano爬坑之旅

前情提要

就postcss.config.js中配置一个cssnano 至于这样对我吗 爬了2【可断可不断】天坑 

刚开始 less文件报错 

先把总结写在这里： webpack4 和 5 对应loader的版本不一样 昂

 

就在这里配置了一个postcss-loader  真的是 怎么就报错了呢 真的是 气人

貌似 我感觉像是node版本冲突导致的  没有思路

方法一： 粗暴百度法

ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/c_error in ./src/styles/index.scss (./node_modules/c_嚣张.miner的博客-CSDN博客

艹 还真有 我试了 可以 但是感到很奇怪啊 说需要加这一行很奇怪的注释

// require('!style-loader!css-loader!less-loader!./index.less')

---------------------------------------------------------------------------------------------------------------------------------

先不管 搞cssnano

GitHub - cssnano/cssnano: A modular minifier, built on top of the PostCSS ecosystem.

先去仓库看看  仓库竟然没有Usage   run

去官网了 Getting started

        一通操作猛如虎  回头一看到还是没压缩 

为啥呀 我的天哪  哭哭

方法一： 暴力百度法

        没有可还行 我的暴力百度法失效了  又试了下 还是不行 真的无语 搞不定啊

        试试别的方法达到这个目的

方法二： 换方案 css-minimizer-webpack-plugin

我改用这个插件了 css-minimizer-webpack-plugin

说是跟cssnano一个原理的

 疯狂配置中。。。。

继续报错

有 大佬说要换插件版本    换！

 再试试    not ok  i feel tired 

---------------------------------------------------------------------------------------------------------------------------------

今天是新的一天 来继续爬坑      【有点想出坑的迹象】

我把webpack.config.js中关于postcss配置全删了

只保留了要给css资源 并且在module中只配置了这些

  rules: [
            //css 资源
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader','postcss-loader'], 
            },

然后就报错了 跟这个一样 但是报的css资源中的getOptions方法

然后我把postcss-loader删了 就可以了 截至目前为止 我可以锁定 就是postcss-loader有问题

我很聪明 我的直觉【百度后各位大佬】告诉我 肯定是版本有问题！

然后我们很明智的就去npm官网 去探访 postcss-loader的老家 问候各位插件了

老家地址：postcss-loader - npm

 

没想到的是 人家大门上就写着呢； 我还没进门做做喝喝茶 就run了

更换好版本之后 我之前配的autoprefixer兄弟就先生效了 

谢了 兄弟！

nano也生效了 【漂亮】

 

出坑大吉      完！