vue-cli设置css不生效的解决方法


Posted in Javascript onFebruary 07, 2020

我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。

在这种项目的webpack.base.config.js一般设置loader的

rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
   },
   ...
}

很显然,我们在.vue文件里面的样式怎么生效跟.vue的这个loader有关了。

上面的 vueLoaderConfig 是对 vue-loader 的配置

打印出来如下:

vue-cli设置css不生效的解决方法

通过阅读/build/utils.js的源码我们很容易知道上面返回的 loaders 就是针对 csspostcss 等的对象,每一项的值是一个数组,它是类似于 [css-loader信息, postcss-loader信息] 的数组,并且第一个是css-loader信息,由于是loader的加载顺序是从右到左的,所以最后一个使用的是css-loader。

以前这样写是没有问题,现在打开好久不用的老项目删除node-modules后重新安装发现问题,我猜测多半是vue-loader之类的升级版本了,毕竟我们使用的 package.json 默认并没有锁定版本。我们安装的很可能并不是我们在 package.json 里面写的版本。

解决方案

方法一

现在只用再加上vue-style-loader即可,也就是使用[vue-style-loader信息, css-loader信息, postcss-loader信息]即可。
我们可以更改.vue的loader相关配置

{
    test: /\.vue$/,
    loader: 'vue-loader',
    // options: vueLoaderConfig
    options: {
      loaders: {
       'scss': 'vue-style-loader!css-loader!sass-loader',
       'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
     }
    }
   },

方法二

也可以更改/build/utils.js里面,讲默认的css-loader改一下,在前面加入vue-style-loader即可

vue-cli设置css不生效的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 #Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 #Javascript
JavaScript实现Excel表格效果
Feb 07 #Javascript
js实现自动播放匀速轮播图
Feb 06 #Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 #Javascript
vue 检测用户上传图片宽高的方法
Feb 06 #Javascript
vue中对象数组去重的实现
Feb 06 #Javascript
You might like
php反射应用示例
2014/02/25 PHP
php导出excel格式数据问题
2014/03/11 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
JavaScript面向对象编程
2008/03/02 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
为python设置socket代理的方法
2015/01/14 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
介绍一下gcc特性
2012/01/20 面试题
学生会竞选自荐信
2013/10/12 职场文书
大型车展策划方案
2014/02/01 职场文书
法人代表委托书
2014/04/04 职场文书
校庆口号
2014/06/20 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
三年级学生评语大全
2014/12/26 职场文书
介绍信格式样本
2015/05/05 职场文书
唐山大地震观后感
2015/06/05 职场文书
标枪加油稿
2015/07/22 职场文书