- 27
- 0
使用vue-cli生成的项目。之前是webpack1.12.x的,现在升级了webpack3.6.0。vue(v2.5.2)。部分css样式错乱,检查后发现是css样式被覆盖了,加载顺序出现了问题。npm run dev,生产环境没发现这个问题。webpack1.12.x也没这个问题。
不知道是否是这个插件问题,ExtractTextPlugin。或者是我引用了bootstrap和element-ui有冲突。之前项目是用的bootstrap,升级后才换的element.
ps:webpack3.6.0的配置都是官方的模板,自己没动什么其他地方。
需要哪部分代码可以提问告知。?
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
main.js
//全局插件css
import './assets/css/animate.min.css' //全局的动画使用
import './assets/css/themify-icons.css' //theimfy字体图标
import './assets/css/icomoon-icons.css' //自定义字体图标
import './assets/css/icomoon2.css' //二期自定义图标
import 'element-ui/lib/theme-chalk/index.css' //element样式单独引入
import './assets/css/element-variables.scss' //自定义主题颜色等
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
// import './assets/css/sweet-alert.css' //弹窗样式,如果用ele,考虑后期干掉
import './assets/css/jquery.steps.css' //有步骤时候的css,如入库质检
import './assets/css/first-layout.css' //整个框架的css,如侧边导航
import './assets/css/common.css' //全局公共样式
import './assets/css/reset-element.css'; //重置element-ui的css
//全局插件js
import $ from 'jquery'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import './assets/js/animo.min.js' //animate动画管理
import './assets/js/first-layout.js' //整个框架的js,如侧边导航
import './assets/js/jquery.qrcode.min.js' //条码二维码
import './assets/js/JsBarcode.code39.min.js' //条码二维码
import './assets/js/particles.js'; //首页的背景动画
import './assets/js/jquery.table2excel.js' // 导出为excle相关插件
//原型
import './golbal/vue_prototype.js'
// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'xxxxxxxx'
})
//element-ui
import ElementUI from 'element-ui'
Vue.use(ElementUI); //elment-ui
//vue相关插件
import Vue from 'vue'
import App from './App'
import router from './router' //引用路由
import store from './store/'
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
}) - 共 0 条
- 全部回答
-
家盛 普通会员 1楼
在 Vue CLI 2 中打包 CSS 时,如果样式出现问题,可能是因为 CSS 文件没有正确处理浏览器的 CSS 规则和浏览器缓存问题。以下是解决此问题的步骤:
-
更新浏览器的 CSS 规则和浏览器缓存: 在浏览器的设置菜单中,找到 "首选项" 或 "设置",然后在 "默认浏览器" 下拉菜单中选择 "开发者工具"。在开发者工具中,您可以查看和更改浏览器的 CSS 规则。例如,您可以使用
--no-cache选项来清除浏览器缓存,或者使用--force-reload选项来强制刷新浏览器。 -
使用
@import模块导入 CSS 文件: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用@import模块导入 CSS 文件。@import语法允许您在一个 CSS 文件中导入多个其他 CSS 文件,从而简化样式管理。 -
使用
:root标签选择根元素: 如果您的 CSS 文件包含一些特定的 CSS 规则,可以使用:root标签选择根元素。这样,您可以在不更改任何 CSS 文件的情况下更改根元素的样式。 -
使用 CSS 选择器: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 CSS 选择器来选择和应用样式。例如,您可以使用
*选择器来选择所有的元素,或者使用nth-child选择器来选择具有特定索引的元素。 -
使用 CSS Modules: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 CSS Modules 来组织和管理样式。CSS Modules 提供了一种结构化的方式来组织 CSS 代码,使得代码更加模块化和易于维护。
-
使用 CSS Grid 或 Flexbox: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 CSS Grid 或 Flexbox 来组织和管理样式。这些 CSS 规则提供了灵活的布局方式,使得代码更加灵活和易于维护。
以上就是解决 Vue CLI 2 中打包 CSS 时样式错乱问题的一些方法。希望可以帮助到您。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
