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 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue实现图片懒加载的方法分析
Feb 05 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
javascript 短路法代码精简
2009/08/20 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python解决字符串倒序输出的问题
2018/06/25 Python
对python3新增的byte类型详解
2018/12/04 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
什么是SCM(软件配置管理)
2014/08/16 面试题
校本教研工作制度
2014/01/22 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
Python如何加载模型并查看网络
2022/07/15 Python