首页 > 程序开发 > web前端 > HTML/CSS >

(vue.js)vue-cli构建,scss文件引入本地css意外报错

2017-07-08

(vue js)vue-cli构建,scss文件引入本地css意外报错。问题: (vue js)vue-cli构建,scss文件引入本地css意外报错。

问题: (vue.js)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":"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

解决方案1:

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

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

npm install css-loader --save-dev

以上介绍了“ (vue.js)vue-cli构建,scss文件引入本地css意外报错”的问题解答,希望对有需要的网友有所帮助。

相关文章
最新文章
热点推荐