vue.js - 使用vue-cli搭建的项目webpack无法处理sass中的iconfont
本文介绍了vue.js - 使用vue-cli搭建的项目webpack无法处理sass中的iconfont的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在app.vue中引入
<style rel="stylesheet/scss" lang="scss">@import "assets/styles/main.scss"</style>
css可以,换成scss文件就报错。
These relative modules were not found:
* ../fonts/bootstrap/glyphicons-halflings-regular.eot in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/bootstrap/glyphicons-halflings-regular.woff2 in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/bootstrap/glyphicons-halflings-regular.woff in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/bootstrap/glyphicons-halflings-regular.ttf in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/bootstrap/glyphicons-halflings-regular.svg in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../../fonts/iconfont.eot?t=1490087999933 in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../../fonts/iconfont.woff?t=1490087999933 in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../../fonts/iconfont.ttf?t=1490087999933 in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../../fonts/iconfont.svg?t=1490087999933 in ./~/.0.26.4@css-loader?{"minimize":false,"sourceMap":false}!./~/.11.3.4@vue-loader/lib/style-compiler?{"id":"data-v-26190be6","scoped":false,"hasInlineConfig":false}!./~/.6.0.3@sass-loader/lib/loader.js?{"sourceMap":false}!./~/.11.3.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
解决方案
解决办法是在入口的vue文件里require进去
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
require('./bower_components/bootstrap/dist/css/bootstrap.css')
require('@assets/styles/scss/fonts/iconfont.css')
require('@assets/styles/main.scss')
export default {
name: 'app'
}
</script>
这篇关于vue.js - 使用vue-cli搭建的项目webpack无法处理sass中的iconfont的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文