详解webpack和webpack-simple中如何引入css文件

  

博主最近研究vue + webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simple两个东西引入css文件有点区别。

  

首先说一下如何在webpack中引入css文件吧。博主的webpack是最新版本,不知1.0版本的是如何,所以下面说的是2.0以后的版本。首先在命令行中新建一个vue项目,如何新建请看我之前发的一篇博文,因为在webpack中,本身就有一个css-loader,所以不需要重新去下一个css-loader,只需要下载一个style-loader即可,下载style-loader的方法是在命令行中,在你所创建的项目目录下,键入npm安装style-loader——save-dev即可,——save-dev的意思是保存到你的项目里,之后在你的项目里打开构建/webpack.base.conf.js文件中,在模块的规则那里,加入关于css规则的代码:

  

详解webpack和webpack-simple中如何引入css文件“> <br/>
  </p>
  <p>之后在App.vue文件中在风格标签项目写入你想要引入的样式:</p>
  <p> <img src=   进口的。/资产/blue.css”      

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

详解webpack和webpack-simple中如何引入css文件