https://github.com/renzp94/jsx-css-scoped-loader

在jsx实现css scoped的webpack loader
https://github.com/renzp94/jsx-css-scoped-loader

babel-plugin css loader postcss-plugin swc-plugin webpack-loader webpack5

Last synced: 6 months ago
JSON representation

在jsx实现css scoped的webpack loader

• Host: GitHub
• URL: https://github.com/renzp94/jsx-css-scoped-loader
• Owner: renzp94
• Created: 2022-03-11T01:01:01.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-18T03:56:20.000Z (about 2 years ago)
• Last Synced: 2025-02-21T22:37:40.241Z (over 1 year ago)
• Topics: babel-plugin, css, loader, postcss-plugin, swc-plugin, webpack-loader, webpack5
• Language: TypeScript
• Homepage:
• Size: 533 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# jsx-css-scoped-loader

在`jsx`实现`css scoped`的`webpack loader`、`babel plugin`、`swc plugin`、`postcss plugin`。

- 处理`jsx`文件的`webpack loader`: `@renzp/jsx-scoped-loader`

- 处理`jsx`文件的`babel plugin`: `@renzp/babel-plugin-jsx-scoped`

- 处理`jsx`文件的`swc plugin`: `@renzp/swc-jsx-scoped`

- 处理`css`文件的`webpack loader`: `@renzp/css-scoped-loader`

- 处理`css`文件的`postcss plugin`: `@renzp/postcss-css-scoped`

> Tips: 如果要实现`css scoped`的话，需要同时使用`JSX`和`CSS`的处理插件。

原理：通过将css文件中的类名全部转化为`xx[data-scoped-xxx]`，然后将每个有className的元素加上`data-scoped-xxx`属性

`css`

```css

/* 转化前 */

.test{

  color: red;

}

/* 转化后 */

.test[data-scoped-729a2688]{

  color:red;

}

```

`tsx`

```tsx

// 转化前

test

// 转化后

test

```


如果需要在css Scoped文件中写全局样式可以通过`::global`

```css

::global .test {

  color: red;

}

```

## webpack

```bash

npm i @renzp/jsx-scoped-loader @renzp/css-scoped-loader -D

```

`webpack.config.js`

```js

module: {

  rules: [

    {

      test: /\.tsx$/,

      exclude: /node_modules/,

      use: ['swc-loader', '@renzp/jsx-scoped-loader'],

    },

    {

      test: /\.scope\.css$/,

      exclude: /node_modules/,

      use: [

        'style-loader',

        'css-loader',

        '@renzp/css-scoped-loader',

      ],

    },

  ],

},

```

## babel

如果你没有用`webpack`，但是用了`babel`，那么可以使用babel插件：`@renzp/babel-plugin-jsx-scoped`，但是还需要配置`postcss`处理的插件：`@renzp/postcss-css-scoped`

## swc

可以使用swc插件：`@renzp/swc-jsx-scoped`和`postcss`处理的插件：`@renzp/postcss-css-scoped`