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实现图书管理小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的No认知时，也需要执行函数2023-01-01
Vue中除了内置指令,也允许注册自定义的指令,下面这篇文章主要给大家介绍了关于Vue3.0写自定义指令的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了关于vue项目部署后刷新网页报404错误解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这里涉及到Vue一个重要特性：响应式系统。数据模型只是普通的 JavaScript对象，当我们修改时，视图会被更新，而变化侦测是响应式系统的核心2021-06-06
这篇文章主要介绍了前端设置cookie之vue-cookies使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue自定义密码输入框解决浏览器自动填充密码的问题(最新方法)
这篇文章主要介绍了vue自定义密码输入框解决浏览器自动填充密码的问题,通过将密码输入框的type设置为text，修改样式上的显示，来实现既可以让浏览器不自动填充密码，又可以隐藏密码的效果，需要的朋友可以参考下2023-04-04
Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单，对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧2022-09-09
这篇文章主要介绍了如何使用RoughViz可视化Vue.js中的草绘图表，帮助大家更好的理解和使用roughViz，感兴趣的朋友可以了解下2021-01-01
Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下2024-04-04
最新评论