@justfn/css-scope-loader

对css文件增加命名空间

原理:

使用 属性选择器 增加命名空间效果

配置

css-loader 前添加 @justfn/css-scope-loader, 进行预处理

// ...
{
  test: /\.less$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        // modules: true, 
      },
    },
    {
      loader: '@justfn/css-scope-loader',
    },
    {
      loader: 'less-loader',
    },
  ],
},

启用

.css / .less 文件中, 首行增加以下注释

/* scope: xxx; */ 

所有选择器将增加 属性 [data-fd-scope="xxx"] ,以达到明明空间的效果

其他说明

^ 单独跳过命名空间的标识

^ div {
  color: red; 
}