【Webpack4】CSS 配置之 postcss-loader

html-css09

【Webpack4】CSS 配置之 postcss-loader,第1张

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件,比如添加浏览器前缀,压缩 CSS 等。

配置 postcss-loader 时,可以在 webpack.config.js 中配置具体选项,也可以新建一个 postcss.config.js ,专门定义 postcss-loader 的配置。

这篇文档基于依赖包版本:

推荐使用文件 postcss.config.js 的方式:

env 取值 process.env.NODE_ENV ,可用来判断是开发模式还是生产模式。

当然也可以在 webpack.config.js 中,只是写起来有点冗余,尤其是需要在多个规则中用到 postcss-loader 时:

压缩 CSS 其他方法可以参考 Webpack 文档中 这一段 。

用 style-loader 时:

用 MiniCssExtractPlugin 时, 注意 sourcemap 得配置成“ inline ”,不然调试时仍旧无法定位到 .less 源码,只能定位到编译后的 CSS 文件。

我只知道在myeclipse中怎么修改,相信会类似。右击你的web工程,选择properties,再选择其中的myeclipse或者eclipse,会看见左边树型结构中有个 web选项,点击,在右边就有修改访问路径了