css-scoped-loader

为css文件中添加scoped的loader

注意：需要搭配@renzp/jsx-scoped-loader或@renzp/swc-jsx-scoped或@renzp/babel-plugin-jsx-scoped一起使用

Usage

npm init @renzp/css-scoped-loader

1module: {
2  rules: [
3    {
4      test: /\.scope\.css$/,
5      exclude: /node_modules/,
6      use: [
7        'style-loader',
8        'css-loader',
9        '@renzp/css-scoped-loader',
10      ],
11    },
12  ],
13},

样式穿透

如果需要样式穿透，可以使用::global

原始代码

1.app {
2  color: #000;
3}
4::global .app {
5  font-size: 20px;
6}

转换之后代码

1.app[data-scope-4ef1f8c9] {
2  color: #000;
3}
4.app {
5  font-size: 20px;
6}