webpack4 处理CSS的方法示例(2)

module.exports = function(css) { console.log(css); // 查看css return window.innerWidth < 1000 ? css.replace("red", "green") : css; // 如果屏幕宽度 < 1000, 替换背景颜色 };

在app.js中引入 css 文件即可：

import base from "./css/base.css";

我们打开控制台，如下图所示，当屏幕宽度小于 1000 时候，css 中的red已经被替换为了green。

需要注意的是：transform是在 css 引入前根据需要修改，所以之后是不会改变的。所以上方代码不是响应式，当把屏幕宽度拉长到大于 1000 时候，依旧是绿色。重新刷新页面，才会是红色。