webpack-css-loader模块化

默认情况下通过 import "./xxx.css" 导入的样式是全局的样式，也就是只要被导入, 在其它文件中也可以使用，如果想要导入的CSS文件只在导入的文件中有效, 那么就需要开启CSS的模块化，开启也就是修改 webpack 核心配置文件，修改地方和内容如下所示：

options: {
    modules: true
}

然后在导入的地方通过 import xxx from "./xxx.css" 导入。

import cssModule from "./index.css"

然后在使用的地方通过 xxx.className 的方式使用即可。

如果不使用模块化的话 ，那么你的样式就会全局生效，先来看看不用的情况下吧，新建一个 custom.js 内容如下

import icon from "./index.jpg";

function addImage() {
    let oImg = document.createElement("img");
    oImg.src = icon;
    oImg.setAttribute("class", "size");
    document.body.appendChild(oImg);
}

export {addImage};

然后再 index.js 中导入之后再调用，custom.js 中的方法，如下：

那么开启之后的效果是怎样的呢，也就是开启CSS的模块化，按照如上的方式进行配置即可。

发现还是一样的效果，需要修改一下设置属性的写法，修改 index.js 如下所示，那么这里只是修改 index.js 中的样式，custom.js 中的样式就是默认的样式：

oImg.setAttribute("class", cssModule.size);