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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
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常用代码
2006/11/23 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
事业单位辞职信范文
2014/01/19 职场文书
2014中考励志标语
2014/06/05 职场文书
高一军训的心得体会
2014/09/01 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
总结会主持词
2015/07/02 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python