vue-cli设置css不生效的解决方法
我们有的项目使用的是老的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 的配置
打印出来如下：
通过阅读/build/utils.js的源码我们很容易知道上面返回的 loaders 就是针对 css 、 postcss 等的对象，每一项的值是一个数组，它是类似于 [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基础-匿名插槽与作用域插槽的合并和覆盖行为 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
使用element-ui的Pagination分页的注意事项及说明
这篇文章主要介绍了使用element-ui的Pagination分页的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
在使用Element Plus中的table组件展示数据时,由于需要对表格行内数据的数据进行修改,下面这篇文章主要给大家介绍了关于Element Plus修改表格行和单元格样式的相关资料,需要的朋友可以参考下2022-04-04
这篇文章中,我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件,其中支持返回上一层地图、点击查看不同城市的详细信息,以及根据数据动态展示不同的统计信息,感兴趣的小伙伴跟着小编一起来看看吧2025-02-02
Vue Element-UI中el-table实现单选的示例代码
在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
vue3+elementui-plus实现一个接口上传多个文件功能
这篇文章主要介绍了vue3+elementui-plus实现一个接口上传多个文件,先使用element-plus写好上传组件，然后假设有个提交按钮，点击上传文件请求接口，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于Vue.js实例方法之生命周期的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要介绍了koa2+vue实现登陆及登录状态判断，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题
这篇文章主要介绍了vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文主要介绍了vant4 封装日期段选择器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
最新评论