π¨ CSS encapsulation solution for Vue JSX
This plugin is used to implement the css scoped effect of template in vue jsxγ
For more details, please refer to react-scoped-css
You have to add one babel plugin and one webpack loader.
yarn add babel-plugin-vue-jsx-scoped-css --dev
and in your babelrc add
{
"presets": ["@vue/babel-preset-jsx"],
"plugins": ["babel-plugin-vue-jsx-scoped-css"]
}also note that you can define your own matching rule like this
{
"plugins": [
[
"babel-plugin-vue-jsx-scoped-css",
{
"include": ".local.(sa|sc|c)ss$"
}
]
]
}This plugin must be before the vue jsx parsing plugin.
yarn add scoped-css-loader --dev
and in your webpack.config.js
{
"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"
}
]
}