Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage with ::v-deep / :deep() #199

Open
xFeXx opened this issue Oct 11, 2022 · 2 comments
Open

Usage with ::v-deep / :deep() #199

xFeXx opened this issue Oct 11, 2022 · 2 comments

Comments

@xFeXx
Copy link

xFeXx commented Oct 11, 2022

Hello :)
I have build a component library for both vue 2.x and vue 3.x with this awesome library and I recently stumpled across a problem I couldn't find a solution to.
In our css we have the power of ::v-deep / :deep() for our scoped styling.
Is there any functionality in this project I could use to have a switch for this depending on our vue version, or should I simply use both and live with the deprecation warnings?
Any ideas in your bright minds?

@peichenhu
Copy link

peichenhu commented Oct 31, 2022

hi,仅使用 /deep/
如果是 less
这样处理:

 install: function (_, pluginManager) {
        class PreProcessor {
            process(stylesheet) {
                const deep_var = '@{deep}';
                const vue_2_deep = '/deep/';
                const less_var = '@deep: ~\':deep()\';\n';
                stylesheet = less_var + stylesheet;
                stylesheet = stylesheet.replace(new RegExp(vue_2_deep, 'gm'), deep_var);
                return stylesheet;
            }
        }
        pluginManager.addPreProcessor(new PreProcessor());
    }

@xFeXx
Copy link
Author

xFeXx commented Nov 28, 2022

Thank you @peichenhu for your reply.
Any usage with /deep/ is considered depricated.
See https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-or-v-deep-in-vue-js

Your solution within the preprocessor must be written in every project where I would use my component library, which I cannot guarantee.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants