vue+webpack dev本地调试全局样式引用失效的解决方案

今天遇到了奇怪的问题，在main.js中引入全局样式，在组件中引用样式时，有些样式失效，有些样式生效。但是神奇的是build打包后样式是正常的。

注册两字没有变成红色。。刚开始以为是class名字命名冲突之类的，网上查了很多资料，有提到说css文件中写了中文注释引起的，试过了不行。后来把所有的样式删掉，只剩一个样式，就生效了。好了，罪魁祸首就是空格符。build打包时会有压缩，所以不会有这个问题。

进入【utils.js】,添加压缩就好了

 const cssLoader = {
  loader: 'css-loader',
  options: {
   sourceMap: options.sourceMap,
   minimize: true //添加
  }
 }

以上这篇vue+webpack dev本地调试全局样式引用失效的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

    使用vue打包,通过css引用图片资源. .img { height: 500px; width: 100%; background: url("./assets/img/1.jpg") no-repeat; background-size: 100%; } 热更新开发环境的效果是这样 但打完包出来的页面却报找不到资源的错误. 查了一下原因,css引入图片再打包后,style-loader无法设置自己的publicPath,于是我改变了ExtractTextPlugin的css路径pu

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

  • vue+webpack dev本地调试全局样式引用失效的解决方案

    今天遇到了奇怪的问题,在main.js中引入全局样式,在组件中引用样式时,有些样式失效,有些样式生效.但是神奇的是build打包后样式是正常的. 注册两字没有变成红色..刚开始以为是class名字命名冲突之类的,网上查了很多资料,有提到说css文件中写了中文注释引起的,试过了不行.后来把所有的样式删掉,只剩一个样式,就生效了.好了,罪魁祸首就是空格符.build打包时会有压缩,所以不会有这个问题. 进入[utils.js],添加压缩就好了 const cssLoader = { loader:

  • Vue模板内引入的组件样式覆盖失效原因及解决

    Vue模板内引入的组件样式覆盖失效原因及解决

    目录 模板内引入组件样式覆盖失效 问题原因 解决方案 vue样式被覆盖问题 模板内引入组件样式覆盖失效 作为一名刚接触Vue的菜鸟, 开发过程中遇到一些小坑又很难搜索的到, 还是记录下来. 分享给有遇到过类似问题的人. Vue项目中假设用到Vant.js这个UI库, 具体引入组件啥的我就不详细说了, 直接看代码: <template>   <div class="login">     <my-btn type="default">

  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候. 从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说. -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件

  • Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

    当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的. 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量. 此时,只用import在main.js中导入variables.less文件是会报错的. 解决办法: 1.安装less和less-loader npm i less less-loader -D 2.要想全局使用还需使用一个插件( sass-resources-l

  • vue webpack开发访问后台接口全局配置的方法

    在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap

  • webpack+vue+express(hot)热启动调试简单配置方法

    前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的. 目录介绍如下 package { "name": "yx", "version": "1.0.0", "description&quo

  • 在vue中更换字体,本地存储字体非引用在线字体库的方法

    1,首先把下载的字体 两种格式放到本地 2,新建文件夹 3,在这个文件里写 4,这main.js 里引用 5,在style里引用字体,结束! 以上这篇在vue中更换字体,本地存储字体非引用在线字体库的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理. 对每个

  • Vue+webpack项目基础配置教程

    最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp

随机推荐