您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> Web开发 >> (vue.js)vue-cli构建,scss文件引入本地css意外报错

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

来源:网络整理     时间:2017/4/8 0:39:35     关键词:

关于网友提出的“ (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意外报错”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4259603.html

相关图片

相关文章