道招

vue-cli设置css不生效

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

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的配置 打印出来如下: file

通过阅读/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即可 file 搞定

更新时间:
上一篇:前端也会需要一个消费队列下一篇:webpack引入UMD风格JS报错Cannot set property xxx of undefined

相关文章

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…

前端框架vue+wordpress做后端

目前正在利用闲暇时捯饬一下自己的博客,毕竟这么久没有维护了,wordpress是可以用restful API来获取数据的,决定前端用vue实现,目前正在尝试中,今天做了其中很小的一部分,就是博客目录 阅读更多…

Vue2.6.10源码分析(一)vue项目怎么神奇的跑起来的

先看index.html的代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta 阅读更多…

支持取消单选组件vue版

原生的单选就是 <input type="radio"/> ,正常情况在 name 相同的单选之间只能选一个,如果只有一个单选框的情况下,一经选中是无法自己取消的,和 阅读更多…

命令式组件Message、Dialog的主流写法分析

这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…

vue多语言的解决方案不只是 vue-i18n,前端+后端完整解决方案

网上搜很多vue多语言的,一般都是介绍vue-i18n怎么使用,当然这是不错的,但是我们如果只是讲这个的话,只是解决了静态文字的多语言化。 这一部分我们也简单讲一下 npm install 阅读更多…

关注道招网公众帐号
道招开发者二群