vue引入css静态资源报错

Question

用vue脚手架搭建了项目： vue init webpack my-app

之后想引入css文件
结构目录

main.js中import引入

但是启动服务之后，报错（如下图）

这是什么原因呢

Answer 1

还缺少字体文件，要把字体文件也下载下来，放到font目录，同时配置loader

Answer 2

没有装css-loader

Answer 3

在webpack配置文件的rules数组中添加打包字体文件的loader,记得npm install --save -D url-loader,如下：

{

    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }

Answer 4

谢谢 @厦冰 @hylwz @Tauren 的回复，经过各种的配置和测试，发现默认之前配置的淘宝 镜像好像有些是需要手动安装的，之后我取消了淘宝镜像的配置，重新搭建了项目，现在的做法是 npm install bootatrap --save 安装了bootastrap的依赖，在main.js中直接import 'bootstrap/dist/css/bootstrap.min.css' 这样是都是可以运行的，也不会报错了