mpvue编译后 样式文件vendor.wxss被引用两次

卖和田玉的程序猿
  • 111

最近在调试小程序的时候,发现有些元素的样式都有两个同样的

查看编译后的样式文件发现vendor.wxss在app.wxss中被引入一次,然后在每个单独页面的wxss中也引入了一次,所以导致有些样式引入了两次

图片描述

图片描述

图片描述

想请问

1、怎么样才能不让引入两次这个文件,比如只在app.wxss中引入或只在每个页面中引入
2、什么文件的样式会被打包进vendor.wxss?目前观察的是组件中的样式和static文件里的样式文件被打包进这里了

回复
阅读 1.8k
3 个回答

两种解决方式:
1、如同 @TIS_OMiddle 这位网友说的,全局的样式放在App.vue中,并且不用scoped,这个方法比较简洁。
2、修改webpack插件,有兴趣的可以看下webpack-mpvue-asset-plugins这个插件,在31行加入

if (filePath.includes('app.wxss')) {
  return
}

当然,第一种方法更简单些了

===================== 补充 ====================

方法2的具体做法:

图片描述图片描述

1、在根目录下的build文件夹下新建plugins文件夹,并在node_modules里找到webpack-mpvue-asset-plugins这个文件夹,把里面index.js中的代码完全拷贝出来,并在plugins下新建文件webpack-mpvue-asset-plugins.js(这么做是出于个人喜好)。

2、在webpack-mpvue-asset-plugins.js里修改,大概31行的位置添加代码,如下图:
图片描述

3、修改build文件夹下webpack.base.conf.js,把对webpack-mpvue-asset-plugins的引用改为刚才新增文件的相对路径。

重新编译,搞定!!

图片描述

同样的经历。。我是用了scss,想在main.js导入全局样式main.scss,结果发现每个wxss文件都去导入了。
我main.scss目的是使用全局样式,但实际上App.vue这个文件的<style></style>片段,对应编译后的app.wxss,而app.wxss的样式会应用到整个小程序当中,所以我们只要在App.vue中写全局样式,并且别用scoped就行了。只要不在main.js中去全局引入样式,目前还没发现其他问题,表现和想象中一致

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏