🔨 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 --devand 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 --devand 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" } ] }