由于开发的项目需要用到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 个评论
要回复文章请先登录或注册