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屋！