账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-cli2打包后css部分样式错乱
    • 2018-01-08 00:00
    • 10
    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
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 家盛 普通会员 1楼

      在 Vue CLI 2 中打包 CSS 时,如果样式出现问题,可能是因为 CSS 文件没有正确处理浏览器的 CSS 规则和浏览器缓存问题。以下是解决此问题的步骤:

      1. 更新浏览器的 CSS 规则和浏览器缓存: 在浏览器的设置菜单中,找到 "首选项" 或 "设置",然后在 "默认浏览器" 下拉菜单中选择 "开发者工具"。在开发者工具中,您可以查看和更改浏览器的 CSS 规则。例如,您可以使用 --no-cache 选项来清除浏览器缓存,或者使用 --force-reload 选项来强制刷新浏览器。

      2. 使用 @import 模块导入 CSS 文件: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 @import 模块导入 CSS 文件。@import 语法允许您在一个 CSS 文件中导入多个其他 CSS 文件,从而简化样式管理。

      3. 使用 :root 标签选择根元素: 如果您的 CSS 文件包含一些特定的 CSS 规则,可以使用 :root 标签选择根元素。这样,您可以在不更改任何 CSS 文件的情况下更改根元素的样式。

      4. 使用 CSS 选择器: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 CSS 选择器来选择和应用样式。例如,您可以使用 * 选择器来选择所有的元素,或者使用 nth-child 选择器来选择具有特定索引的元素。

      5. 使用 CSS Modules: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 CSS Modules 来组织和管理样式。CSS Modules 提供了一种结构化的方式来组织 CSS 代码,使得代码更加模块化和易于维护。

      6. 使用 CSS Grid 或 Flexbox: 如果您的 CSS 文件包含一些复杂的 CSS 规则,可以使用 CSS Grid 或 Flexbox 来组织和管理样式。这些 CSS 规则提供了灵活的布局方式,使得代码更加灵活和易于维护。

      以上就是解决 Vue CLI 2 中打包 CSS 时样式错乱问题的一些方法。希望可以帮助到您。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部