https://github.com/mrminfive/babel-plugin-vue-jsx-scoped-css
:hammer: CSS encapsulation solution for Vue JSX
https://github.com/mrminfive/babel-plugin-vue-jsx-scoped-css
scoped-css vue vue-jsx
Last synced: about 1 year ago
JSON representation
:hammer: CSS encapsulation solution for Vue JSX
- Host: GitHub
- URL: https://github.com/mrminfive/babel-plugin-vue-jsx-scoped-css
- Owner: Mrminfive
- License: mit
- Created: 2019-09-30T06:16:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T11:57:21.000Z (over 3 years ago)
- Last Synced: 2024-11-02T22:21:35.992Z (over 1 year ago)
- Topics: scoped-css, vue, vue-jsx
- Language: TypeScript
- Homepage:
- Size: 1.63 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-vue-jsx-scoped-css
:hammer: CSS encapsulation solution for Vue JSX
## About
This plugin is used to implement the css scoped effect of template in vue jsx。
For more details, please refer to [react-scoped-css][reactscopedcss]
## Use
You have to add one babel plugin and one webpack loader.
### Babel
```bash
yarn add babel-plugin-vue-jsx-scoped-css --dev
```
and in your babelrc add
```json
{
"presets": ["@vue/babel-preset-jsx"],
"plugins": ["babel-plugin-vue-jsx-scoped-css"]
}
```
also note that you can define your own matching rule like this
```json
{
"plugins": [
[
"babel-plugin-vue-jsx-scoped-css",
{
"include": ".local.(sa|sc|c)ss$"
}
]
]
}
```
**This plugin must be before the vue jsx parsing plugin.**
### Webpack
```bash
yarn add scoped-css-loader --dev
```
and in your webpack.config.js
```json
{
"test": /\.(sc|c|sa)ss$/,
"use": [
{
"loader": "style-loader"
},
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 2
}
},
// You have to put in after `css-loader` and before any `pre-precessing loader`
{ "loader": "scoped-css-loader" },
{
"loader": "sass-loader"
}
]
}
```
[reactscopedcss]: https://github.com/gaoxiaoliangz/react-scoped-css