使用vue-cli搭建的项目webpack无法处理sass中的iconfont

Question

在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

Answer 1

解决办法是在入口的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>

Answer 2

可能路径问题吧，把路径改成绝对路径试试

Answer 3

css-loader 这个的问题，你检查下有没有装，然后看下配置有没有装了sass那些，配置有没有对

Answer 4

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";