css引入地图,vue-cli构建，scss文件引入本地css意外报错

项目使用vue-cli进行构建，vue和UI框架版本如下：

"mint-ui": "^2.2.2",

"vue": "^2.2.2",

之前我在scss文件中引入mint-ui的css，并没有报错：

@import "reset";

@import "color";

@import "mixin";

@import url('~mint-ui/lib/style.css');

@import url("//at.alicdn.com/t/font_3bostup5puba9k9.css");

但后期 我想使用animate.css, 一引入就报错：

@import url('../css/animate.css');

报错信息,看起来像是vue-loader.config.js中的默认配置引起？：

//vue-loader.config.js

var utils = require('./utils')

var config = require('../config')

var isProduction = process.env.NODE_ENV === 'production'

module.exports = {

loaders: utils.cssLoaders({

sourceMap: isProduction

? config.build.productionSourceMap

: config.dev.cssSourceMap,

extract: isProduction

})

}

ERROR  Failed to compile with 5 errors10:49:19

These dependencies were not found:

* -!../../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!../css/animate.css in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"v-00e7db85","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Search.vue, ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"v-712d8308","scoped":true,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/City.vue and 1 other

* -!../../../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!../css/animate.css in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"v-010720e8","scoped":true,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/play/List.vue, ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"v-7046d60f","scoped":true,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/common/Filter.vue

To install them, you can run: npm install --save -!../../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!../css/animate.css -!../../../node_modules/css-loader/index.js?{"minimize":false,"sourceMap":false}!../css/animate.css

缺少css-loader，使用下面的命令进行安装，然后在重新运行试试

npm install css-loader --save-dev

安装以下依赖就可以了，vue-cli默认没有scss-loader,scss-loader又需要node-sass，只安装scss-loader是不行的。另外webpack就不需要配置了，因为vue-cli会帮你配置安装的loader

"node-sass": "^4.5.1",

"sass-loader": "^6.0.3",

"scss": "^0.2.4",

"scss-loader": "^0.0.1",