scss文件引入css文件出错


64x64
光明到来 2017-11-02 21:35 568


vue-cli创建的项目,在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");

但scss文件引入animate.css文件却出错,@import url('../css/animate.css');

报错信息

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":"data-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":"data-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":"data-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":"data-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

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
  })
}


cssscssvue 回答问题

2 个解决方案


1
speed 2017-11-02T21:36:06

安装以下依赖就可以了,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"

2
锤道仁 2017-11-02T21:36:25

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

npm install css-loader --save-dev

评论