3***@qq.com
3***@qq.com
  • 发布:2023-03-30 17:07
  • 更新:2023-03-30 17:07
  • 阅读:465

如何修改style 默认scoped

分类:uni-app

由于开发的项目需要用到uniapp,在对原有项目修改的时候发现,uniapp框架下的style默认scoped,在对uniapp的modules检索的时候发现如何修改。
该方法只针对h5项目使用,若有跨平台需求,请注意样式覆盖问题。

  • 准备工作,使用patch-package

  • npm i patch-package --save

    在根目录的package.json的script中添加:

    "postinstall": "patch-package"
  • 固定@dcloudio/vue-cli-plugin-uni版本
    在package.json的devDependencies中把@dcloudio/vue-cli-plugin-uni版本固定,去掉^或~符号

  • 修改node_modules代码
    找到@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js
    将exports修改为:

    module.exports = function (content, map) {  
    this.cacheable && this.cacheable()  
    const resourcePath = normalizePath(this.resourcePath)  
    if (  
    resourcePath !== normalizePath(path.resolve(process.env.UNI_INPUT_DIR, 'App.vue')) &&  
    content.indexOf('platform="mp-weixin"') === -1 // 小程序组件暂不加scoped  
    ) {  
    return this.callback(null, content.replace(/(<style\b[^><]*)>/ig, '$1 >'), map)//这里原本有个scoped,删掉它就行  
    }  
    this.callback(null, content, map)  
    }
  • 生成patch文件

    npx patch-package @dcloudio/vue-cli-plugin-uni

    至此就完成了替换工作

0 关注 分享

要回复文章请先登录注册