babel-plugin-vue-jsx-scoped-css

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

Use

You have to add one babel plugin and one webpack loader.

Babel

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.

Webpack

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