@cailiao/css-scoped-loader

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。