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 相关文章推荐
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
详解AngularJS 模块化
Jun 14 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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
星际争霸中的热键
2020/03/04 星际争霸
PHP的面向对象编程
2006/10/09 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
Vuex的各个模块封装的实现
2020/06/05 Javascript
python中的多重继承实例讲解
2014/09/28 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
python binascii 进制转换实例
2019/06/12 Python
pandas如何处理缺失值
2019/07/31 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Django框架请求生命周期实现原理
2020/11/13 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
意大利男装网店:Vrients
2019/05/02 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
打架检讨书300字
2014/02/02 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
python垃圾回收机制原理分析
2022/04/13 Python