npm

Need private packages and team management tools?Check out npm Orgs. »

wrapper-css-loader

1.1.3 • Public • Published

wrapper-css-loader

把css内容加载对象并且用md5值做为外壳包装原有全部class,一般和postcss配合使用。 如:

{
    test: /\.css$/,
    loader: 'wrapper-css-loader?length=4!postcss-loader'
}

处理结果

// 导入样式
import css from './style.css'

/*
css 值如下
{
    wrapper: '9033df94d33a368c3b73',
    css: '.9033df94d33a368c3b73 .component { color: blue }'
}
*/

例子说明

使用前

.component {
    color: blue
}

使用后

.9033df94d33a368c3b73 .component {
    color: blue
}

参数设置

length

wrapper-css-loader?length=4

length 设置包装class名字的长度, 结果是 .9033 .component

wrapper

wrapper-css-loader?wrapper=true // 外面用class包装,适用于组件样式
wrapper-css-loader?wrapper=false // 外面不用包装,适用于全局样式

// 可以这样处理全局样式,把css扩展名特殊化,例如: .css -> .gcss 
{
    test: /\.gcss$/,
    loader: 'wrapper-css-loader?length=3&wrapper=false!postcss-loader'
}

注意

  • length 必须大于1
  • 在css文件中不能使用 @import [在postcss中加入postcss-import插件可以支持]
  • css文本处理时候会自动把单引号处理成双引号'' -> ""

install

npm i wrapper-css-loader

Downloadsweekly downloads

8

version

1.1.3

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability