0
点赞
收藏
分享

微信扫一扫

webpack-css-loader模块化

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

webpack-css-loader模块化_css

options: {
modules: true
}

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

webpack-css-loader模块化_css_02

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 中的方法,如下:

webpack-css-loader模块化_ico_03

webpack-css-loader模块化_模块化_04

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

webpack-css-loader模块化_模块化_05

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

webpack-css-loader模块化_模块化_06

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

webpack-css-loader模块化_模块化_07




举报

相关推荐

0 条评论