# css-scope-loader

**Repository Path**: justfn/css-scope-loader

## Basic Information

- **Project Name**: css-scope-loader
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-10
- **Last Updated**: 2021-10-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 对css文件增加命名空间

## 原理: 
使用 属性选择器 增加命名空间效果 

## 配置 
css-loader 前添加 @justfn/css-scope-loader, 进行预处理 
```js
// ...
{
  test: /\.less$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        // modules: true, 
      },
    },
    {
      loader: '@justfn/css-scope-loader',
    },
    {
      loader: 'less-loader',
    },
  ],
},
```

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

```css
/* scope: xxx; */ 

```

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


## 其他说明 

### ^ 单独跳过命名空间的标识 
```css 
^ div {
  color: red; 
}
```