全局引入样式和局部引入样式均有不生效的情况



  • 目前再小程序上使用,如题所述,我在引入了taro-ui 的样式出现了一些组件只生效了全局引入的样式,一些组件只生效了局部引入的样式反倒全局引入的没有用。

    // app.scss
    @import "~taro-ui/dist/style/index.scss";
    
    // ArticleItem.scss
    // @import "~taro-ui/dist/style/components/tag.scss";
    @import "~taro-ui/dist/style/components/article.scss";
    

    三个引入中第一个为全局 app.scss 中一次性引入,后面两个分别为 tag 的样式和 article 的样式,但是现在 article 的样式就是全局的不生效,这里局部的引入才生效,而 tag 的引入则是局部的引入不生效,全局的才生效,这里局部的 tag 的样式引入与否没有区别。有没有办法解决这个问题,让我要么全局引入要么局部引入啊,如果能局部引入最好。

    1. 全局引入+局部引入(均生效)
    // app.scss
    @import "~taro-ui/dist/style/index.scss";
    
    // ArticleItem.scss
    // @import "~taro-ui/dist/style/components/tag.scss";
    @import "~taro-ui/dist/style/components/article.scss";
    

    7e051165-0d0f-4a62-9608-5d213c8205cc-image.png

    1. 注释掉局部引入保留全局引入(article样式不生效)
    // app.scss
    @import "~taro-ui/dist/style/index.scss";
    
    // ArticleItem.scss
    // @import "~taro-ui/dist/style/components/tag.scss";
    // @import "~taro-ui/dist/style/components/article.scss";
    

    1fb9aec0-e612-42ea-b407-f680de730dcf-image.png

    1. 注释掉全局引入,保留局部引入(tag 样式不生效)
    // app.scss
    // @import "~taro-ui/dist/style/index.scss";
    
    // ArticleItem.scss
    @import "~taro-ui/dist/style/components/tag.scss";
    @import "~taro-ui/dist/style/components/article.scss";
    

    68ce73c6-42cf-415d-bb06-5d291a55b579-image.png

    如上所示,求解!





  • 组件内再次引入能解决全局不生效的问题,但是不能解释局部样式不生效全局反倒生效的问题啊。


登录后回复