@cailiao/css-scoped-loader
v0.1.4
Published
css-scoped-loader for webpack4
Downloads
12
Maintainers
Readme
css-scoped-loader Webpack loader
css-scoped-loader for webpack@4
描述(DEPRECATED)
对使用或基于 single-spa
微前端框架开发微应用之间进行样式隔离。此loader会将经由的css
(或sass
、scss
、less
等)代码处理为指定namespace
下生效的样式代码。
例:css
/* namespace: demo */
/* 传入 css */
html div {
background: #666;
}
.class-a div {
background: #fff;
}
/* 输出 css */
#demo div {
background: #666;
}
#demo .class-a div {
background: #fff;
}
开始使用
npm install @cailiao/css-scoped-loader@latest --save-dev
webpack配置示例:
module.exports = {
// ...
module: {
rules: [
test: RegEx,
use: [
{ loader: 'css-loader' },
...
// 需放在 css-loader 之后,中间可以有post-css-loader等其他可以处理css代码的loader
{
loader: '@cailiao/css-scoped-loader',
options: {
namespace: String, // 一个字符串,必须是html根元素的id,否则将导致所有样式均不生效。
ignores: [
'./fileName.ext', // 忽略文件
'./dirName', // 忽略文件夹
/\.less$/ // 忽略正则匹配的文件
],
bodyId: String
}
},
// 需放在sass-loader等将其他语法解析为css语法的loader之后,必须确保css-scoped-loader接收到的是css而非未经处理的sass、less等
...
{ loader: 'sass-loader' }
]
]
},
// ...
};
Options
namespace
String
必须微应用样式的命名空间,是微应用 html 元素(或表示原根元素的新元素)上的 id. 此 id 要求自行添加至 html 元素上,css-scoped-loader 不会修改任何 html 标签。
bodyId
String
可选微应用 body 元素(或表示微应用原 body 元素的新元素)上的id,用于替换 css 代码中的 body 元素选择器。此 id 要求自行添加至 body 元素上,css-scoped-loader 不会修改任何 html 标签。
ignores
Array
可选构建时进行作用域范围处理的需要忽略的文件(夹)地址的数组,成员可以是字符串或者正则表达式,加入此地址的样式文件 css-scoped-loader 不会对其做任何改动,但要求此地址必须存在并可以访问。
建议使用相对地址,相对地址相对于 webpack 命令运行的工作目录,一般是微应用项目的根目录。
也可以使用符合操作系统格式的绝对地址。
对于 sass、less 等基于 css 封装的拓展语言,解析为 css 后只记录根模块(直接在js中导入的样式文件)的地址,所以如果需要忽略,sass、less 等 css 拓展语言文件,需要将根模块的地址加入 ignores。