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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
vuex分模块后,实现获取state的值
Jul 26 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
让python json encode datetime类型
2010/12/28 Python
详解python的数字类型变量与其方法
2016/11/20 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
销售经理竞聘书
2014/03/31 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
领导干部保密承诺书
2014/08/30 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
入党介绍人意见2015
2015/06/01 职场文书
人事任命书范本
2015/09/21 职场文书