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实现的表格分页实现代码
Jun 21 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
node.js入门学习之url模块
Feb 25 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php session 错误
2009/05/21 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
打包PyQt5应用时的注意事项
2020/02/14 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
公证书标准格式
2014/04/10 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js