Skip to content

webpack的自定义loader模块,给css文件中选择器加入自定义属性以起到隔离作用域的作用

Notifications You must be signed in to change notification settings

xuxusheng/css-attr-scope-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

css-attr-scope-loader

webpack的自定义loader模块,给css文件中选择器加入自定义属性以起到隔离作用域的作用

测试

采用 jasmine 进行单元测试,测试文件在 spec 目录中。

npm install 安装依赖包后,在项目根目录下输入 npm run test 命令进行测试。

自定义 attr-loader

tools/attr-loader 文件夹中

以 attr-loader?scope=xxx 的形式接受参数

在所有css文件中的选择器后面加上自定义属性选择器[xxx]

如果没有接受到scope参数,则不做任何处理。

例如:

a#content.active:first-child .cla > div::first-line[data-content],
#selectTwo:hover + #id2,
.group::after {
    border: 1px solid rebeccapurple;
    height: 200px;
}

a:not(:visited) {
    width: 100px;
    height: 150px;
}

执行 webpack 命令后生成的文件中:

a#content.active:first-child .cla[xusheng] > div::first-line[data-content][xusheng],
#selectTwo:hover + #id2,
.group::after[xusheng] {
    border: 1px solid rebeccapurple;
    height: 200px;
}

a:not(:visited)[xusheng] {
    width: 100px;
    height: 150px;
}

About

webpack的自定义loader模块,给css文件中选择器加入自定义属性以起到隔离作用域的作用

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published