详解css-loader配置

html-css010

详解css-loader配置,第1张

作用

css-loader用于将css文件打包到js中, 常常配合style-loader一起使用,将css文件打包并插入到页面中。如下:

实现css类的作用域控制

默认情况下css文件中的类的作用, 第一种情况是不开启css-module模式

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 文件。